Styleguide 0.28.5

27 - Poll

<form class="experimental-poll large-6 medium-8 small-12 columns">
  <label>
     <input type="radio" name="experimental-poll" value="a">
     <span class="description">I'M A MONSTER!!</span>
     <span class="score"></span>
     <span class="bar"></span>
  </label>
  <label>
     <input type="radio" name="experimental-poll" value="b">
     <span class="description">Coo coo ca chaw</span>
     <span class="score"></span>
     <span class="bar"></span>
  </label>
  <label>
     <input type="radio" name="experimental-poll" value="c">
     <span class="description">Heyyyy Uncle Father Oscar</span>
     <span class="score"></span>
     <span class="bar"></span>
  </label>
</form>

27.1 - Colors

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

.primary

Primary

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

.sand

Sand

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

.yellow

Yellow

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

.blue

Blue

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

.black

Black

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

<form class="experimental-poll panel {$modifiers} large-6 medium-8 small-12 columns">
  <div class="copy">
    <h5 class="uppercase">Are you a monster?</h5>
    <p>Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj</p>
    <label>
       <span class="bar"></span>
       <input type="radio" name="experimental-poll" value="a"> <span class="description">I'M A MONSTER!!</span> 
    </label>
    <label>
       <span class="bar"></span>
       <input type="radio" name="experimental-poll" value="b"> <span class="description">Coo coo ca chaw</span> 
    </label>
    <label>
       <span class="bar"></span>
       <input type="radio" name="experimental-poll" value="c"> <span class="description">Heyyyy Uncle Father Oscar</span> 
    </label>
    <div class="poll-actions">
       <a class="button primary"> Stem </a>
       <a class="results right"> Se resultatene </a>
    </div>
  </div>
</form>

27.2 - Active state

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
.primary

Primary

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
.sand

Sand

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
.yellow

Yellow

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
.blue

Blue

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
.black

Black

Are you a monster?

Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj

Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.
     <form class="experimental-poll active {$modifiers} panel large-6 medium-8 small-12 columns">
      <div class="copy">
        <h5 class="uppercase">Are you a monster?</h5>
        <p>Lolzalskjd øaksjdhgfl kajsgkqhweiuh alkdfsghl akjgfhøioqurh gøkajdflg khj</p>
        <label>
           <span class="bar one"></span>
           <span class="description">I'M A MONSTER!!</span> <div class="numbers"><span class="score">(21%) </span><span class="amount">402</span></div>
        </label>
        <label>
           <span class="bar two"></span>
           <span class="description">Coo coo ca chaw</span> <div class="numbers"><span class="score">(66%) </span><span class="amount">1278</span></div>
        </label>
        <label>
           <span class="bar three"></span>
          <span class="description">Heyyyy Uncle Father Oscar</span> <div class="numbers"><span class="score">(14%) </span><span class="amount">265</span></div>
        </label>
        <div class="poll-actions">
          <small>Avstemningen er ikke styrt og reflekterer kun lesernes egne meninger.</small>
        </div>
      </div>
    </form>