Styleguide 0.1.0

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

Red

Are you a monster?

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

.orange

Orange

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

.green

Green

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

.purple

Purple

Are you a monster?

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

.burgundy

Burgundy

Are you a monster?

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

.pink

Pink

Are you a monster?

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

.secondary

Secondary

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> <span class="score">41%</span>
    </label>
    <label>
       <span class="bar"></span>
       <input type="radio" name="experimental-poll" value="b"> <span class="description">Coo coo ca chaw</span> <span class="score">28%</span>
    </label>
    <label>
       <span class="bar"></span>
       <input type="radio" name="experimental-poll" value="c"> <span class="description">Heyyyy Uncle Father Oscar</span> <span class="score">63%</span>
    </label>
  </div>
</form>