Glossary

btn
Button. Button or link: <button class="btn"...>...</button> or <a class="btn"...>...</a>.
btn-icn
Button icon. Button or link with a visible icon and visually hidden text: <button class="btn-icn"...>...</button> or <a class="btn-icn"...>...</a>.
btn-icn-txt
Button icon text. Button or link with a visible icon and visible text: <button class="btn-icn-txt"...>...</button> or <a class="btn-icn-txt"...>...</a>.
lbl-btn
Label button. For the label tag only. Button appearance. It may contain an input of type checkbox, radio or file: <label class="lbl-btn"...>...</label>.
lbl-btn-icn
Label button icon. For the label tag only. Button appearance with a visible icon and visually hidden text. It may contain an input of type checkbox, radio or file: <label class="lbl-btn-icn"...>...</label>.
lbl-btn-icn-txt
Label button icon text. For the label tag only. Button appearance with a visible icon and visible text. It may contain an input of type checkbox, radio or file: <label class="lbl-btn-icn-txt"...>...</label>.
chk
Check. For the label tag only. Checkbox appearance. It may contain an input of type checkbox or radio: <label class="chk"...>...</label>.
txt
Textfield. For the label tag only. Textfield appearance: <label class="txt"...>...</label>.
txta
Textarea. For the label tag only. Textarea appearance to wrap the textarea tag: <label class="txta"...>...</label>.
sel
Select. For the label tag only. Select appearance: <label class="sel"...>...</label>.
sel-mul
Select multiple. For the label tag only. Textarea appearance to wrap a select tag using attribute multiple or size: <label class="sel-mul"...>...</label>.
rng
Range. For the label tag only. Range appearance: <label class="rng"...>...</label>.
swc
Switch. For the label tag only. Switch appearance. It may contain an input of type checkbox: <label class="swc"...>...</label>.
tbl
Table. For the table tag only: <table class="tbl"...>...</table>.

Image

Image elements accept this set of classes:

Shapes
.capsule, .round and .square
Grayscale
.grayscale
Thumbnail
.thumbnail
Accessibility icon
<img alt="Accessibility icon" src="...">

<img alt="" src="...">

<img src="...">
Image with filled alt attribute, with empty alt attribute, and without any alt attribute.
Image shapes
<img class="capsule" alt="" src="...">

<img class="round" alt="" src="...">

<img class="square" alt="" src="...">
Image shapes: .square, .round and .capsule.
Image grayscale
<img class="grayscale" alt="" src="...">
Image and with class .grayscale.
Image thumbnail
<img class="thumbnail" alt="" src="...">
Image thumbnail .thumbnail.

Figure

La Kontxa bay in Donostia. By Larunbe Photo.
La Kontxa bay in Donostia. By Larunbe Photo.
<figure>
  ...
  <figcaption>
    ...
  </figcaption>
</figure>
figure containing img and its description in figcaption.

Table

Table elements accept this set of classes:

Border
.border
Framed
.framed
Hover
.hover
Responsive
.responsive--xs, .responsive--sm, .responsive--md, .responsive--lg
Stripe
.stripe--even, .stripe--odd
Extra small
.xs
Table caption
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
<table class="tbl">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <td>#</td>
      <th scope="col">First</th>
      <th scope="col">Second</th>
      <th scope="col">Third</th>
      <th scope="col">Fourth</th>
      <th scope="col">Fifth</th>
      <th scope="col">Sixth</th>
      <th scope="col">Seventh</th>
      <th scope="col">Eighth</th>
      <th scope="col">Nineth</th>
      <th scope="col">Tenth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>#</td>
      <th scope="col">First</th>
      <th scope="col">Second</th>
      <th scope="col">Third</th>
      <th scope="col">Fourth</th>
      <th scope="col">Fifth</th>
      <th scope="col">Sixth</th>
      <th scope="col">Seventh</th>
      <th scope="col">Eighth</th>
      <th scope="col">Nineth</th>
      <th scope="col">Tenth</th>
    </tr>
  </tfoot>
</table>
Table .tbl.
Table border
Table caption
# First Second Third Fourth Fifth
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth
<table class="tbl border">
...
</table>
Table border .tbl.border.
Table framed
Table caption
# First Second Third Fourth Fifth
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth
<table class="tbl framed">
...
</table>
Table framed .tbl.framed.
Table hover
Table caption
# First Second Third Fourth Fifth
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth
<table class="tbl hover">
...
</table>
Table hover .tbl.hover.
Table responsive
Table caption
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
<table class="tbl responsive--md">
...
</table>
Table responsive .tbl.responsive.
Table stripe
Table caption
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
Table caption
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
<table class="tbl stripe--even">
  ...
</table>

<table class="tbl stripe--odd">
  ...
</table>
Table stripe .tbl.stripe.
Table extra small
Table caption
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
# First Second Third Fourth Fifth Sixth Seventh Eighth Nineth Tenth
<table class="tbl xs">
  ...
</table>
Table xs .tbl.xs.

Tag

Tag elements accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
Lorem ipsum dolor sit amet, consectetur adipisicing.
<span class="tag">Lorem</span> ipsum dolor sit amet, consectetur adipisicing.

Lorem <span class="tag primary">ipsum</span> dolor sit amet, consectetur adipisicing.

Lorem ipsum <span class="tag secondary">dolor</span> sit amet, consectetur adipisicing.

Lorem ipsum dolor <span class="tag success">sit</span> amet, consectetur adipisicing.

Lorem ipsum dolor sit <span class="tag info">amet</span>, consectetur adipisicing.

Lorem ipsum dolor sit amet, <span class="tag warning">consectetur</span> adipisicing.

Lorem ipsum dolor sit amet, consectetur <span class="tag danger">adipisicing</span>.
Default .tag and .primary, .secondary, .success, .info, .warning and .danger.

Button

Elements with "button-ish" appearance accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Variants
.solid and .ghost
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Elevated
.elevated
Vertical (only for buttons with icon and text)
.v
Works only in elements with class .btn-icn-txt and .lbl-btn-icn-txt.
Link button
Link button disabled
<button class="btn" type="button">Button</button>

<button class="btn-icn" type="button">
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon</span>
</button>

<button class="btn-icn-txt" type="button">
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon text</span>
</button>

<a class="btn" href="#" role="button">Link button</a>

<button class="btn" type="button" disabled>Button disabled</button>

<button class="btn-icn" type="button" disabled>
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon disabled</span>
</button>

<button class="btn-icn-txt" type="button" disabled>
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon text disabled</span>
</button>

<a class="btn" href="#" role="button" aria-disabled="true" tabindex="-1">Link button disabled</a>
Enabled and disabled states of .btn, Button .btn-icn, Button .btn-icn-txt, and Link .btn.
Icon and text arrangements
<button class="btn-icn-txt" type="button">
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon text</span>
</button>

<button class="btn-icn-txt" type="button">
  <span>Button icon text</span>
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
</button>

<button class="btn-icn-txt v" type="button">
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
  <span>Button icon text vertical</span>
</button>

<button class="btn-icn-txt v" type="button">
  <span>Button icon text vertical</span>
  <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
</button>
Button .btn-icn-txt with icon after text and before text in a horizontal axis. Button .btn-icn-txt.v with icon after text and before text in a vertical axis.
Button looks in solid variant
<button class="btn" type="button">.btn</button>

<button class="btn solid primary" type="button">.solid.primary</button>

<button class="btn solid secondary" type="button">.solid.secondary</button>

<button class="btn solid success" type="button">.solid.success</button>

<button class="btn solid info" type="button">.solid.info</button>

<button class="btn solid warning" type="button">.solid.warning</button>

<button class="btn solid danger" type="button">.solid.danger</button>
Button .btn and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Button looks in ghost variant
<button class="btn" type="button">.btn</button>

<button class="btn ghost primary" type="button">.ghost.primary</button>

<button class="btn ghost secondary" type="button">.ghost.secondary</button>

<button class="btn ghost success" type="button">.ghost.success</button>

<button class="btn ghost info" type="button">.ghost.info</button>

<button class="btn ghost warning" type="button">.ghost.warning</button>

<button class="btn ghost danger" type="button">.ghost.danger</button>
Button .btn and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Button sizes
<button class="btn xs" type="button">Button .xs</button>

<button class="btn sm" type="button">Button .sm</button>

<button class="btn md" type="button">Button .md</button>

<button class="btn lg" type="button">Button .lg</button>
Button sizes: .xs, .sm, .md and .lg.
Button shapes
<button class="btn capsule" type="button">Button .capsule</button>

<button class="btn round" type="button">Button .round</button>

<button class="btn square" type="button">Button .square</button>
Button shapes: .square, .round and .capsule.
Button block
<button class="btn block" type="button">Button .block</button>

<button class="btn-icn block" type="button">Button icon .block</button>

<button class="btn-icn-txt block" type="button">Button icon text .block</button>
Buttons .btn.block, .btn-icn.block and .btn-icn-txt.block.
Button elevated
<button class="btn elevated" type="button">Button .elevated</button>
Button .elevated.

Label-button

Label-buttons (both for file upload and check-buttons) accept the "button-ish" set of classes. See "button-ish" classes.


<label class="lbl-btn" for="lbl-btn__file--01">
  <input id="lbl-btn__file--01" type="file">
  <span>
    Upload file
  </span>
</label>

<label class="lbl-btn-icn" for="lbl-btn-icn__file--01">
  <input id="lbl-btn-icn__file--01" type="file">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Upload file</span>
  </span>
</label>

<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__file--01">
  <input id="lbl-btn-icn-txt__file--01" type="file">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Upload file</span>
  </span>
</label>

<label class="lbl-btn" for="lbl-btn__file--02">
  <input id="lbl-btn__file--02" type="file" disabled>
  <span>
    Upload file disabled
  </span>
</label>

<label class="lbl-btn-icn" for="lbl-btn-icn__file--02">
  <input id="lbl-btn-icn__file--02" type="file" disabled>
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Upload file disabled</span>
  </span>
</label>

<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__file--03">
  <input id="lbl-btn-icn-txt__file--03" type="file" disabled>
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Upload file disabled</span>
  </span>
</label>
Label-button .lbl-btn for file upload input, Label-button .lbl-btn-icn and Label-button .lbl-btn-icn-txt, and disabled states.
Icon and text arrangements
<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__chk--01">
  <input id="lbl-btn-icn-txt__chk--01" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">
      ...
    </svg>
    <span>Label-button icon text</span>
  </span>
</label>

<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__chk--02">
  <input id="lbl-btn-icn-txt__chk--02" type="checkbox">
  <span>
    <span>Label-button icon text</span>
    <svg viewBox="0 0 32 32" aria-hidden="true">
      ...
    </svg>
  </span>
</label>

<label class="lbl-btn-icn-txt v" for="lbl-btn-icn-txt__chk--03">
  <input id="lbl-btn-icn-txt__chk--03" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">
      ...
    </svg>
    <span>Label-button icon text vertical</span>
  </span>
</label>

<label class="lbl-btn-icn-txt v" for="lbl-btn-icn-txt__chk--04">
  <input id="lbl-btn-icn-txt__chk--04" type="checkbox">
  <span>
    <span>Label-button icon text vertical</span>
    <svg viewBox="0 0 32 32" aria-hidden="true">
      ...
    </svg>
  </span>
</label>
Label-button .lbl-btn-icn-txt with icon after text and before text in a horizontal axis. Button .lbl-btn-icn-txt.v with icon after text and before text in a vertical axis.
Label-button for check inputs
<label class="lbl-btn" for="lbl-btn__chk--01">
  <input id="lbl-btn__chk--01" type="checkbox">
  <span>
    Button Checkbox
  </span>
</label>

<label class="lbl-btn" for="lbl-btn__chk--02">
  <input id="lbl-btn__chk--02" type="radio">
  <span>
    Button Radio
  </span>
</label>

<label class="lbl-btn-icn" for="lbl-btn-icn__chk--01">
  <input id="lbl-btn-icn__chk--01" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Checkbox</span>
  </span>
</label>

<label class="lbl-btn-icn" for="lbl-btn-icn__chk--02">
  <input id="lbl-btn-icn__chk--02" type="radio">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Radio</span>
  </span>
</label>

<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__chk--05">
  <input id="lbl-btn-icn-txt__chk--05" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Checkbox</span>
  </span>
</label>

<label class="lbl-btn-icn-txt" for="lbl-btn-icn-txt__chk--06">
  <input id="lbl-btn-icn-txt__chk--06" type="radio">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Radio</span>
  </span>
</label>
Label-button .lbl-btn for checkbox and radio inputs, Label-button .lbl-btn-icn and Label-button .lbl-btn-icn-txt.
Label-button looks in solid variant
<label class="lbl-btn" for="lbl-btn__solid--01">
  <input id="lbl-btn__solid--01" type="checkbox">
  <span>
    Button Check
  </span>
</label>

<label class="lbl-btn solid primary" for="lbl-btn__solid--02">
  <input id="lbl-btn__solid--02" type="checkbox">
  <span>
    Button Check .solid.primary
  </span>
</label>

<label class="lbl-btn solid secondary" for="lbl-btn__solid--03">
  <input id="lbl-btn__solid--03" type="checkbox">
  <span>
    Button Check .solid.secondary
  </span>
</label>

<label class="lbl-btn solid success" for="lbl-btn__solid--04">
  <input id="lbl-btn__solid--04" type="checkbox">
  <span>
    Button Check .solid.success
  </span>
</label>

<label class="lbl-btn solid info" for="lbl-btn__solid--05">
  <input id="lbl-btn__solid--05" type="checkbox">
  <span>
    Button Check .solid.info
  </span>
</label>

<label class="lbl-btn solid warning" for="lbl-btn__solid--06">
  <input id="lbl-btn__solid--06" type="checkbox">
  <span>
    Button Check .solid.warning
  </span>
</label>

<label class="lbl-btn solid danger" for="lbl-btn__solid--07">
  <input id="lbl-btn__solid--07" type="checkbox">
  <span>
    Button Check .solid.danger
  </span>
</label>
Label-button .lbl-btn and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Label-button looks in ghost variant
<label class="lbl-btn" for="lbl-btn__ghost--01">
  <input id="lbl-btn__ghost--01" type="checkbox">
  <span>
    Button Check
  </span>
</label>

<label class="lbl-btn ghost primary" for="lbl-btn__ghost--02">
  <input id="lbl-btn__ghost--02" type="checkbox">
  <span>
    Button Check .ghost.primary
  </span>
</label>

<label class="lbl-btn ghost secondary" for="lbl-btn__ghost--03">
  <input id="lbl-btn__ghost--03" type="checkbox">
  <span>
    Button Check .ghost.secondary
  </span>
</label>

<label class="lbl-btn ghost success" for="lbl-btn__ghost--04">
  <input id="lbl-btn__ghost--04" type="checkbox">
  <span>
    Button Check .ghost.success
  </span>
</label>

<label class="lbl-btn ghost info" for="lbl-btn__ghost--05">
  <input id="lbl-btn__ghost--05" type="checkbox">
  <span>
    Button Check .ghost.info
  </span>
</label>

<label class="lbl-btn ghost warning" for="lbl-btn__ghost--06">
  <input id="lbl-btn__ghost--06" type="checkbox">
  <span>
    Button Check .ghost.warning
  </span>
</label>

<label class="lbl-btn ghost danger" for="lbl-btn__ghost--07">
  <input id="lbl-btn__ghost--07" type="checkbox">
  <span>
    Button Check .ghost.danger
  </span>
</label>
Label-button .lbl-btn and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Label-button sizes
<label class="lbl-btn solid primary xs" for="lbl-btn__size--01">
  <input id="lbl-btn__size--01" type="checkbox">
  <span>
    Button Check .xs
  </span>
</label>

<label class="lbl-btn solid primary sm" for="lbl-btn__size--02">
  <input id="lbl-btn__size--02" type="checkbox">
  <span>
    Button Check .sm
  </span>
</label>

<label class="lbl-btn solid primary md" for="lbl-btn__size--03">
  <input id="lbl-btn__size--03" type="checkbox">
  <span>
    Button Check .md
  </span>
</label>

<label class="lbl-btn solid primary lg" for="lbl-btn__size--04">
  <input id="lbl-btn__size--04" type="checkbox">
  <span>
    Button Check .lg
  </span>
</label>
Label-button sizes: .xs, .sm, .md and .lg.
Label-button shapes
<label class="lbl-btn solid primary capsule" for="lbl-btn__shape--01">
  <input id="lbl-btn__shape--01" type="checkbox">
  <span>
    Button Check .capsule
  </span>
</label>

<label class="lbl-btn solid primary round" for="lbl-btn__shape--02">
  <input id="lbl-btn__shape--02" type="checkbox">
  <span>
    Button Check .round
  </span>
</label>

<label class="lbl-btn solid primary square" for="lbl-btn__shape--03">
  <input id="lbl-btn__shape--03" type="checkbox">
  <span>
    Button Check .square
  </span>
</label>
Label-button shapes: .square, .round and .capsule.
Label-button block
<label class="lbl-btn solid primary block" for="lbl-btn__block--01">
  <input id="lbl-btn__block--01" type="checkbox">
  <span>
    Button Check .block
  </span>
</label>

<label class="lbl-btn-icn solid primary block" for="lbl-btn__block--02">
  <input id="lbl-btn__block--02" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Check .block</span>
  </span>
</label>

<label class="lbl-btn-icn-txt solid primary block" for="lbl-btn__block--03">
  <input id="lbl-btn__block--03" type="checkbox">
  <span>
    <svg viewBox="0 0 32 32" aria-hidden="true">...</svg>
    <span>Button icon Check .block</span>
  </span>
</label>
Label-buttons .lbl-btn.block, .lbl-btn-icn.block and .lbl-btn-icn-txt.block.
Label-button elevated
<label class="lbl-btn elevated" for="lbl-btn__elevated--01">
  <input id="lbl-btn__elevated--01" type="checkbox">
  <span>
    Button Check .elevated
  </span>
</label>
Label-button .lbl-btn.elevated.

Check: Checkbox and Radio

Check elements accept this class:

Block
.block
Checkbox


<label class="chk" for="checkbox-01">
  <input id="checkbox-01" type="checkbox">
  <span>Checkbox</span>
</label>

<label class="chk" for="checkbox-02">
  <input id="checkbox-02" type="checkbox" checked>
  <span>Checkbox checked</span>
</label>

<label class="chk" for="checkbox-03">
  <input id="checkbox-03" type="checkbox" disabled>
  <span>Checkbox disabled</span>
</label>
Default .chk checkbox and disabled checkbox.
Radio


<label class="chk" for="radio-01">
  <input id="radio-01" type="radio">
  <span>Radio</span>
</label>

<label class="chk" for="radio-02">
  <input id="radio-02" type="radio" disableddisabled>
  <span>Radio disabled</span>
</label>

<label class="chk" for="radio-03">
  <input id="radio-03" type="radio" disabled>
  <span>Radio disabled</span>
</label>
Default .chk radio and disabled radio.
Check block
<label class="chk block" for="checkbox-04">
  <input id="checkbox-04" type="checkbox">
  <span>Checkbox .block</span>
</label>

<label class="chk block" for="radio-04">
  <input id="radio-04" type="radio">
  <span>Radio .block</span>
</label>
.chk.block checkbox and radio.

Textfield

Elements with "texfield-ish" appearance accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Variants
.solid and .ghost
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Icon before and icon after
.icon--before, .icon--after
Automatically adds icons only for child input tags of type email, number, password, search, tel and url
Hide text
.text--hide
Vertical
.v



<label class="txt" for="txt-01">
  <span>Textfield</span>
  <input id="txt-01" placeholder="txt-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt" for="txt-02">
  <span>Textfield read-only</span>
  <input id="txt-02" placeholder="txt-02 lorem ipsum dolor sit" type="text" readonly>
</label>

<label class="txt disabled" for="txt-03">
  <span>Textfield disabled</span>
  <input id="txt-03" placeholder="txt-03 lorem ipsum dolor sit" type="text" disabled>
</label>

<label class="txt" for="txt-04">
  <span>Textfield</span>
  <input id="txt-04" placeholder="txt-04 lorem ipsum dolor sit" aria-describedby="txt-04--description" type="text">
  <small id="txt-04--description">Some textfield description.</small>
</label>
Default textfield .txt, textfield read-only, textfield disabled, and textfield with description.
Textfield looks in solid variant






<label class="txt" for="txt__solid-01">
  <span>Textfield</span>
  <input id="txt__solid-01" placeholder="txt__solid-01 lorem ipsum dolor sit" aria-describedby="txt__solid-01--description" type="text">
  <small id="txt__solid-01--description">Some textfield description.</small>
</label>

<label class="txt solid primary" for="txt__solid-02">
  <span>Textfield .solid.primary</span>
  <input id="txt__solid-02" placeholder="txt__solid-02 lorem ipsum dolor sit" aria-describedby="txt__solid-02--description" type="text">
  <small id="txt__solid-02--description">Some textfield description.</small>
</label>

<label class="txt solid secondary" for="txt__solid-03">
  <span>Textfield .solid.secondary</span>
  <input id="txt__solid-03" placeholder="txt__solid-03 lorem ipsum dolor sit" aria-describedby="txt__solid-03--description" type="text">
  <small id="txt__solid-03--description">Some textfield description.</small>
</label>

<label class="txt solid success" for="txt__solid-04">
  <span>Textfield .solid.success</span>
  <input id="txt__solid-04" placeholder="txt__solid-04 lorem ipsum dolor sit" aria-describedby="txt__solid-04--description" type="text">
  <small id="txt__solid-04--description">Some textfield description.</small>
</label>

<label class="txt solid info" for="txt__solid-05">
  <span>Textfield .solid.info</span>
  <input id="txt__solid-05" placeholder="txt__solid-05 lorem ipsum dolor sit" aria-describedby="txt__solid-05--description" type="text">
  <small id="txt__solid-05--description">Some textfield description.</small>
</label>

<label class="txt solid warning" for="txt__solid-06">
  <span>Textfield .solid.warning</span>
  <input id="txt__solid-06" placeholder="txt__solid-06 lorem ipsum dolor sit" aria-describedby="txt__solid-06--description" type="text">
  <small id="txt__solid-06--description">Some textfield description.</small>
</label>

<label class="txt solid danger" for="txt__solid-07">
  <span>Textfield .solid.danger</span>
  <input id="txt__solid-07" placeholder="txt__solid-07 lorem ipsum dolor sit" aria-describedby="txt__solid-07--description" type="text">
  <small id="txt__solid-07--description">Some textfield description.</small>
</label>
Textfield .txt and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Textfield looks in ghost variant






<label class="txt" for="txt__ghost-01">
  <span>Textfield</span>
  <input id="txt__ghost-01" placeholder="txt__ghost-01 lorem ipsum dolor sit" aria-describedby="txt__ghost-01--description" type="text">
  <small id="txt__ghost-01--description">Some textfield description.</small>
</label>

<label class="txt ghost primary" for="txt__ghost-02">
  <span>Textfield .ghost.primary</span>
  <input id="txt__ghost-02" placeholder="txt__ghost-02 lorem ipsum dolor sit" aria-describedby="txt__ghost-02--description" type="text">
  <small id="txt__ghost-02--description">Some textfield description.</small>
</label>

<label class="txt ghost secondary" for="txt__ghost-03">
  <span>Textfield .ghost.secondary</span>
  <input id="txt__ghost-03" placeholder="txt__ghost-03 lorem ipsum dolor sit" aria-describedby="txt__ghost-03--description" type="text">
  <small id="txt__ghost-03--description">Some textfield description.</small>
</label>

<label class="txt ghost success" for="txt__ghost-04">
  <span>Textfield .ghost.success</span>
  <input id="txt__ghost-04" placeholder="txt__ghost-04 lorem ipsum dolor sit" aria-describedby="txt__ghost-04--description" type="text">
  <small id="txt__ghost-04--description">Some textfield description.</small>
</label>

<label class="txt ghost info" for="txt__ghost-05">
  <span>Textfield .ghost.info</span>
  <input id="txt__ghost-05" placeholder="txt__ghost-05 lorem ipsum dolor sit" aria-describedby="txt__ghost-05--description" type="text">
  <small id="txt__ghost-05--description">Some textfield description.</small>
</label>

<label class="txt ghost warning" for="txt__ghost-06">
  <span>Textfield .ghost.warning</span>
  <input id="txt__ghost-06" placeholder="txt__ghost-06 lorem ipsum dolor sit" aria-describedby="txt__ghost-06--description" type="text">
  <small id="txt__ghost-06--description">Some textfield description.</small>
</label>

<label class="txt ghost danger" for="txt__ghost-07">
  <span>Textfield .ghost.danger</span>
  <input id="txt__ghost-07" placeholder="txt__ghost-07 lorem ipsum dolor sit" aria-describedby="txt__ghost-07--description" type="text">
  <small id="txt__ghost-07--description">Some textfield description.</small>
</label>
Textfield .txt and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Textfield sizes
<label class="txt xs" for="txt__size-01">
  <span>Textfield .xs</span>
  <input id="txt__size-01" placeholder="txt__size-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt sm" for="txt__size-02">
  <span>Textfield .sm</span>
  <input id="txt__size-02" placeholder="txt__size-02 lorem ipsum dolor sit" type="text">
</label>

<label class="txt md" for="txt__size-03">
  <span>Textfield .md</span>
  <input id="txt__size-03" placeholder="txt__size-03 lorem ipsum dolor sit" type="text">
</label>

<label class="txt lg" for="txt__size-04">
  <span>Textfield .lg</span>
  <input id="txt__size-04" placeholder="txt__size-04 lorem ipsum dolor sit" type="text">
</label>
Textfield .txt sizes: .xs, .sm, .md and .lg.
Textfield shapes
<label class="txt capsule" for="txt__shape-01">
  <span>Textfield .capsule</span>
  <input id="txt__shape-01" placeholder="txt__shape-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt round" for="txt__shape-02">
  <span>Textfield .round</span>
  <input id="txt__shape-02" placeholder="txt__shape-02 lorem ipsum dolor sit" type="text">
</label>

<label class="txt square" for="txt__shape-03">
  <span>Textfield .square</span>
  <input id="txt__shape-03" placeholder="txt__shape-03 lorem ipsum dolor sit" type="text">
</label>
Textfield .txt shapes: .capsule, .round and .square.
Textfield block

<label class="txt block" for="txt__block-01">
  <span>Textfield block</span>
  <input id="txt__block-01" placeholder="txt__block-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt block" for="txt__block-02">
  <span>Textfield block</span>
  <input id="txt__block-02" placeholder="txt-02 lorem ipsum dolor sit" aria-describedby="txt__block-02--description" type="text">
  <small id="txt__block-02--description">Some textfield description.</small>
</label>
Textfield .block, and textfield with description.
Textfield icon before and icon after






<label class="txt icon--before" for="txt__icon-011">
  <span>.icon--before type="email"</span>
  <input id="txt__icon-011" placeholder="email@example.com" type="email">
</label>

<label class="txt icon--after" for="txt__icon-012">
  <span>.icon--after type="email"</span>
  <input id="txt__icon-012" placeholder="email@example.com" type="email">
</label>

<label class="txt icon--before" for="txt__icon-02">
  <span>.icon--before type="number"</span>
  <input id="txt__icon-02" placeholder="000" type="number">
</label>

<label class="txt icon--before" for="txt__icon-03">
  <span>.icon--before type="password"</span>
  <input id="txt__icon-03" placeholder="password" type="password">
</label>

<label class="txt icon--before" for="txt__icon-04">
  <span>.icon--before type="search"</span>
  <input id="txt__icon-04" placeholder="Search..." type="search">
</label>

<label class="txt icon--before" for="txt__icon-05">
  <span>.icon--before type="tel"</span>
  <input id="txt__icon-05" placeholder="(+34) 012 345 678" type="tel">
</label>

<label class="txt icon--before" for="txt__icon-06">
  <span>.icon--before type="url"</span>
  <input id="txt__icon-06" placeholder="www.example.com" type="url">
</label>
Textfields .icon--before and .icon--after for email, textfield for number, textfield for password, textfield for search, textfield for telephone number and textfield for URL.
Textfield text-hide
<label class="txt text--hide" for="txt__text-hide-01">
  <span>Textfield text-hide</span>
  <input id="txt__text-hide-01" placeholder="txt__text-hide-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt text--hide" for="txt__text-hide-02">
  <span>Textfield text-hide</span>
  <input id="txt__text-hide-02" placeholder="txt__text-hide-02 lorem ipsum dolor sit" aria-describedby="txt__text-hide-02--description" type="text">
  <small id="txt__text-hide-02--description">Some textfield description.</small>
</label>
Textfield .text--hide, and textfield with description.
Textfield vertical

<label class="txt v" for="txt__vertical-01">
  <span>Textfield vertical</span>
  <input id="txt__vertical-01" placeholder="txt__vertical-01 lorem ipsum dolor sit" type="text">
</label>

<label class="txt v" for="txt__vertical-02">
  <span>Textfield vertical</span>
  <input id="txt__vertical-02" placeholder="txt__vertical-02 lorem ipsum dolor sit" aria-describedby="txt__vertical-02--description" type="text">
  <small id="txt__vertical-02--description">Some textfield description.</small>
</label>
Textfield vertical .v, and textfield with description.

Textarea

Elements with "textarea-ish" appearance accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Variants
.solid and .ghost
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Hide text
.text--hide
Vertical
.v



<label class="txta" for="txta-01">
  <span>Textarea</span>
  <textarea id="txta-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta" for="txta-02">
  <span>Textarea read-only</span>
  <textarea id="txta-02" readonly>Lorem ipsum...</textarea>
</label>

<label class="txta disabled" for="txta-03">
  <span>Textarea disabled</span>
  <textarea id="txta-03" disabled>Lorem ipsum...</textarea>
</label>

<label class="txta" for="txta-04">
  <span>Textarea</span>
  <textarea id="txta-04" aria-describedby="txta-04--description">Lorem ipsum...</textarea>
  <small id="txta-04--description">Some textarea description.</small>
</label>
Default textarea .txta, textarea read-only, textarea disabled, and textarea with description.
Textarea looks in solid variant






<label class="txta" for="txta__solid-01">
  <span>Textarea</span>
  <textarea id="txta__solid-01" aria-describedby="txta__solid-01--description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
  <small id="txta__solid-01--description">Some textfield description.</small>
</label>

<label class="txta solid primary" for="txta__solid-02">
  <span>Textarea .solid.primary</span>
  <textarea id="txta__solid-02" aria-describedby="txta__solid-02--description">Lorem ipsum...</textarea>
  <small id="txta__solid-02--description">Some textfield description.</small>
</label>

<label class="txta solid secondary" for="txta__solid-03">
  <span>Textarea .solid.secondary</span>
  <textarea id="txta__solid-03" aria-describedby="txta__solid-03--description">Lorem ipsum...</textarea>
  <small id="txta__solid-03--description">Some textfield description.</small>
</label>

<label class="txta solid success" for="txta__solid-04">
  <span>Textarea .solid.success</span>
  <textarea id="txta__solid-04" aria-describedby="txta__solid-04--description">Lorem ipsum...</textarea>
  <small id="txta__solid-04--description">Some textfield description.</small>
</label>

<label class="txta solid info" for="txta__solid-05">
  <span>Textarea .solid.info</span>
  <textarea id="txta__solid-05" aria-describedby="txta__solid-05--description">Lorem ipsum...</textarea>
  <small id="txta__solid-05--description">Some textfield description.</small>
</label>

<label class="txta solid warning" for="txta__solid-06">
  <span>Textarea .solid.warning</span>
  <textarea id="txta__solid-06" aria-describedby="txta__solid-06--description">Lorem ipsum...</textarea>
  <small id="txta__solid-06--description">Some textfield description.</small>
</label>

<label class="txta solid danger" for="txta__solid-07">
  <span>Textarea .solid.danger</span>
  <textarea id="txta__solid-07" aria-describedby="txta__solid-07--description">Lorem ipsum...</textarea>
  <small id="txta__solid-07--description">Some textfield description.</small>
</label>
Textarea .txta and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Textarea looks in ghost variant






<label class="txta" for="txta__ghost-01">
  <span>Textarea</span>
  <textarea id="txta__ghost-01" aria-describedby="txta__ghost-01--description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
  <small id="txta__ghost-01--description">Some textfield description.</small>
</label>

<label class="txta ghost primary" for="txta__ghost-02">
  <span>Textarea .ghost.primary</span>
  <textarea id="txta__ghost-02" aria-describedby="txta__ghost-02--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-02--description">Some textfield description.</small>
</label>

<label class="txta ghost secondary" for="txta__ghost-03">
  <span>Textarea .ghost.secondary</span>
  <textarea id="txta__ghost-03" aria-describedby="txta__ghost-03--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-03--description">Some textfield description.</small>
</label>

<label class="txta ghost success" for="txta__ghost-04">
  <span>Textarea .ghost.success</span>
  <textarea id="txta__ghost-04" aria-describedby="txta__ghost-04--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-04--description">Some textfield description.</small>
</label>

<label class="txta ghost info" for="txta__ghost-05">
  <span>Textarea .ghost.info</span>
  <textarea id="txta__ghost-05" aria-describedby="txta__ghost-05--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-05--description">Some textfield description.</small>
</label>

<label class="txta ghost warning" for="txta__ghost-06">
  <span>Textarea .ghost.warning</span>
  <textarea id="txta__ghost-06" aria-describedby="txta__ghost-06--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-06--description">Some textfield description.</small>
</label>

<label class="txta ghost danger" for="txta__ghost-07">
  <span>Textarea .ghost.danger</span>
  <textarea id="txta__ghost-07" aria-describedby="txta__ghost-07--description">Lorem ipsum...</textarea>
  <small id="txta__ghost-07--description">Some textfield description.</small>
</label>
Textarea .txta and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Textarea sizes



<label class="txta xs" for="txta__size-01">
  <span>Textarea .xs</span>
  <textarea id="txta__size-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta sm" for="txta__size-02">
  <span>Textarea .sm</span>
  <textarea id="txta__size-02">Lorem ipsum...</textarea>
</label>

<label class="txta md" for="txta__size-03">
  <span>Textarea .md</span>
  <textarea id="txta__size-03">Lorem ipsum...</textarea>
</label>

<label class="txta lg" for="txta__size-04">
  <span>Textarea .lg</span>
  <textarea id="txta__size-04">Lorem ipsum...</textarea>
</label>
Textarea .txta sizes: .xs, .sm, .md and .lg.
Textarea shapes


<label class="txta capsule" for="txta__shape-01">
  <span>Textarea .capsule</span>
  <textarea id="txta__shape-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta round" for="txta__shape-02">
  <span>Textarea .round</span>
  <textarea id="txta__shape-02">Lorem ipsum...</textarea>
</label>

<label class="txta square" for="txta__shape-03">
  <span>Textarea .square</span>
  <textarea id="txta__shape-03">Lorem ipsum...</textarea>
</label>
Textarea .txta shapes: .capsule, .round and .square.
Textarea block

<label class="txta block" for="txta__block-01">
  <span>Textarea .block</span>
  <textarea id="txta__block-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta block" for="txta__block-02">
  <span>Textarea .block</span>
  <textarea id="txta__block-02" aria-describedby="txta__block-02--description">Lorem ipsum...</textarea>
  <small id="txta__block-02--description">Some textfield description.</small>
</label>
Textarea block .txta.block, and textarea with description.
Textarea text-hide

<label class="txta text--hide" for="txta__text-hide-01">
  <span>Textarea .text--hide</span>
  <textarea id="txta__text-hide-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta text--hide" for="txta__text-hide-02">
  <span>Textarea .text--hide</span>
  <textarea id="txta__text-hide-02" aria-describedby="txta__text-hide-02--description">Lorem ipsum...</textarea>
  <small id="txta__text-hide-02--description">Some textfield description.</small>
</label>
Textarea text-hide .txta.text--hide, and textarea with description.
Textarea vertical

<label class="txta v" for="txta__vertical-01">
  <span>Textarea .v</span>
  <textarea id="txta__vertical-01">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quo quas repudiandae deserunt ipsa est quaerat veniam nemo cumque placeat, tenetur quasi officiis voluptas corrupti in possimus similique nostrum laboriosam. Saepe ad odio, quidem, quod incidunt commodi asperiores voluptas non assumenda mollitia quis porro quos, laboriosam ducimus accusantium ipsam! Laborum nulla accusamus aperiam molestias, maxime vitae quidem tenetur officia doloremque.</textarea>
</label>

<label class="txta v" for="txta__vertical-02">
  <span>Textarea .v</span>
  <textarea id="txta__vertical-02" aria-describedby="txta__vertical-02--description">Lorem ipsum...</textarea>
  <small id="txta__vertical-02--description">Some textfield description.</small>
</label>
Textarea vertical .txta.v, and textarea with description.

Select

Select elements accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Variants
.solid and .ghost
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Elevated
.elevated
Text hide
.text--hide
Vertical
.v


<label class="sel" for="sel-01">
  <span>Select</span>
  <select id="sel-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel disabled" for="sel-02">
  <span>Select</span>
  <select id="sel-02" disabled>
    <option value="">Options...</option>
  </select>
</label>

<label class="sel" for="sel-03">
  <span>Select</span>
  <select id="sel-03" aria-describedby="sel-03--description">
    <option value="">Options...</option>
  </select>
  <small id="sel-03--description">Some select description.</small>
</label>
Default select .sel, select disabled, and select with description.
Select looks in solid variant






<label class="sel" for="sel__solid-01">
  <span>Select</span>
  <select id="sel__solid-01" aria-describedby="sel__solid-01--description">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
  <small id="sel__solid-01--description">Some select description.</small>
</label>

<label class="sel solid primary" for="sel__solid-02">
  <span>Select .solid.primary</span>
  <select id="sel__solid-02" aria-describedby="sel__solid-02--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-02--description">Some select description.</small>
</label>

<label class="sel solid secondary" for="sel__solid-03">
  <span>Select .solid.secondary</span>
  <select id="sel__solid-03" aria-describedby="sel__solid-03--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-03--description">Some select description.</small>
</label>

<label class="sel solid success" for="sel__solid-04">
  <span>Select .solid.success</span>
  <select id="sel__solid-04" aria-describedby="sel__solid-04--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-04--description">Some select description.</small>
</label>

<label class="sel solid info" for="sel__solid-05">
  <span>Select .solid.info</span>
  <select id="sel__solid-05" aria-describedby="sel__solid-05--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-05--description">Some select description.</small>
</label>

<label class="sel solid warning" for="sel__solid-06">
  <span>Select .solid.warning</span>
  <select id="sel__solid-06" aria-describedby="sel__solid-06--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-06--description">Some select description.</small>
</label>

<label class="sel solid danger" for="sel__solid-07">
  <span>Select .solid.danger</span>
  <select id="sel__solid-07" aria-describedby="sel__solid-07--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__solid-07--description">Some select description.</small>
</label>
Select .sel and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Select looks in ghost variant






<label class="sel" for="sel__ghost-01">
  <span>Select</span>
  <select id="sel__ghost-01" aria-describedby="sel__ghost-01--description">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
  <small id="sel__ghost-01--description">Some select description.</small>
</label>

<label class="sel ghost primary" for="sel__ghost-02">
  <span>Select .ghost.primary</span>
  <select id="sel__ghost-02" aria-describedby="sel__ghost-02--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-02--description">Some select description.</small>
</label>

<label class="sel ghost secondary" for="sel__ghost-03">
  <span>Select .ghost.secondary</span>
  <select id="sel__ghost-03" aria-describedby="sel__ghost-03--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-03--description">Some select description.</small>
</label>

<label class="sel ghost success" for="sel__ghost-04">
  <span>Select .ghost.success</span>
  <select id="sel__ghost-04" aria-describedby="sel__ghost-04--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-04--description">Some select description.</small>
</label>

<label class="sel ghost info" for="sel__ghost-05">
  <span>Select .ghost.info</span>
  <select id="sel__ghost-05" aria-describedby="sel__ghost-05--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-05--description">Some select description.</small>
</label>

<label class="sel ghost warning" for="sel__ghost-06">
  <span>Select .ghost.warning</span>
  <select id="sel__ghost-06" aria-describedby="sel__ghost-06--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-06--description">Some select description.</small>
</label>

<label class="sel ghost danger" for="sel__ghost-07">
  <span>Select .ghost.danger</span>
  <select id="sel__ghost-07" aria-describedby="sel__ghost-07--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__ghost-07--description">Some select description.</small>
</label>
Select .sel and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Select sizes
<label class="sel solid primary xs" for="sel__size-01">
  <span>Select .xs</span>
  <select id="sel__size-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel solid primary sm" for="sel__size-02">
  <span>Select .sm</span>
  <select id="sel__size-02">
    <option value="">Options...</option>
  </select>
</label>

<label class="sel solid primary md" for="sel__size-03">
  <span>Select .md</span>
  <select id="sel__size-03">
    <option value="">Options...</option>
  </select>
</label>

<label class="sel solid primary lg" for="sel__size-04">
  <span>Select .lg</span>
  <select id="sel__size-04">
    <option value="">Options...</option>
  </select>
</label>
Select sizes: .xs, .sm, .md and .lg.
Select shapes
<label class="sel solid primary capsule" for="sel__shape-01">
  <span>Select .capsule</span>
  <select id="sel__shape-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel solid primary round" for="sel__shape-02">
  <span>Select .round</span>
  <select id="sel__shape-02">
    <option value="">Options...</option>
  </select>
</label>

<label class="sel solid primary square" for="sel__shape-03">
  <span>Select .square</span>
  <select id="sel__shape-03">
    <option value="">Options...</option>
  </select>
</label>
Select shapes: .capsule, .round and .square.
Select block

<label class="sel solid primary block" for="sel__block-01">
  <span>Select .block</span>
  <select id="sel__block-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel solid primary block" for="sel__block-02">
  <span>Select .block</span>
  <select id="sel__block-02" aria-describedby="sel__block-02--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__block-02--description">Some select description.</small>
</label>
Select .block.
Select elevated
<label class="sel elevated" for="sel__elevated-01">
  <span>Select .elevated</span>
  <select id="sel__elevated-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>
Select .elevated.
Select text-hide

<label class="sel text--hide" for="sel__text-hide-01">
  <span>Select .text--hide</span>
  <select id="sel__text-hide-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel text--hide" for="sel__text-hide-02">
  <span>Select .text--hide</span>
  <select id="sel__text-hide-02" aria-describedby="sel__text-hide-02--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__text-hide-02--description">Some select description.</small>
</label>
Select .text--hide, and select with description.
Select vertical

<label class="sel v" for="sel__vertical-01">
  <span>Select .v</span>
  <select id="sel__vertical-01">
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel v" for="sel__vertical-02">
  <span>Select .v</span>
  <select id="sel__vertical-02" aria-describedby="sel__vertical-02--description">
    <option value="">Options...</option>
  </select>
  <small id="sel__vertical-02--description">Some select description.</small>
</label>
Select .v, and select with description.
Select multiple

Select elements with attribute [multiple] accept the "textarea-ish" set of classes. See "textarea-ish" classes.



<label class="sel-mul" for="sel-mul-01">
  <span>Select multiple</span>
  <select id="sel-mul-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul disabled" for="sel-mul-02">
  <span>Select multiple</span>
  <select id="sel-mul-02" multiple disabled>
    <option value="">Options...</option>
  </select>
</label>

<label class="sel-mul" for="sel-mul-03">
  <span>Select multiple</span>
  <select id="sel-mul-03" aria-describedby="sel-mul-03--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul-03--description">Some select description.</small>
</label>
Default select multiple .sel-mul, select multiple disabled, and select multiple with description.
Select multiple looks in solid variant






<label class="sel-mul" for="sel-mul__solid-01">
  <span>Select multiple</span>
  <select id="sel-mul__solid-01" aria-describedby="sel-mul__solid-01--description" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
  <small id="sel-mul__solid-01--description">Some select description.</small>
</label>

<label class="sel-mul solid primary" for="sel-mul__solid-02">
  <span>Select multiple .solid.primary</span>
  <select id="sel-mul__solid-02" aria-describedby="sel-mul__solid-02--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-02--description">Some select description.</small>
</label>

<label class="sel-mul solid secondary" for="sel-mul__solid-03">
  <span>Select multiple .solid.secondary</span>
  <select id="sel-mul__solid-03" aria-describedby="sel-mul__solid-03--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-03--description">Some select description.</small>
</label>

<label class="sel-mul solid success" for="sel-mul__solid-04">
  <span>Select multiple .solid.success</span>
  <select id="sel-mul__solid-04" aria-describedby="sel-mul__solid-04--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-04--description">Some select description.</small>
</label>

<label class="sel-mul solid info" for="sel-mul__solid-05">
  <span>Select multiple .solid.info</span>
  <select id="sel-mul__solid-05" aria-describedby="sel-mul__solid-05--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-05--description">Some select description.</small>
</label>

<label class="sel-mul solid warning" for="sel-mul__solid-06">
  <span>Select multiple .solid.warning</span>
  <select id="sel-mul__solid-06" aria-describedby="sel-mul__solid-06--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-06--description">Some select description.</small>
</label>

<label class="sel-mul solid danger" for="sel-mul__solid-07">
  <span>Select multiple .solid.danger</span>
  <select id="sel-mul__solid-07" aria-describedby="sel-mul__solid-07--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__solid-07--description">Some select description.</small>
</label>
Select multiple .sel-mul and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Select multiple looks in ghost variant






<label class="sel-mul" for="sel-mul__ghost-01">
  <span>Select multiple</span>
  <select id="sel-mul__ghost-01" aria-describedby="sel-mul__ghost-01--description" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
  <small id="sel-mul__ghost-01--description">Some select description.</small>
</label>

<label class="sel-mul ghost primary" for="sel-mul__ghost-02">
  <span>Select multiple .ghost.primary</span>
  <select id="sel-mul__ghost-02" aria-describedby="sel-mul__ghost-02--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-02--description">Some select description.</small>
</label>

<label class="sel-mul ghost secondary" for="sel-mul__ghost-03">
  <span>Select multiple .ghost.secondary</span>
  <select id="sel-mul__ghost-03" aria-describedby="sel-mul__ghost-03--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-03--description">Some select description.</small>
</label>

<label class="sel-mul ghost success" for="sel-mul__ghost-04">
  <span>Select multiple .ghost.success</span>
  <select id="sel-mul__ghost-04" aria-describedby="sel-mul__ghost-04--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-04--description">Some select description.</small>
</label>

<label class="sel-mul ghost info" for="sel-mul__ghost-05">
  <span>Select multiple .ghost.info</span>
  <select id="sel-mul__ghost-05" aria-describedby="sel-mul__ghost-05--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-05--description">Some select description.</small>
</label>

<label class="sel-mul ghost warning" for="sel-mul__ghost-06">
  <span>Select multiple .ghost.warning</span>
  <select id="sel-mul__ghost-06" aria-describedby="sel-mul__ghost-06--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-06--description">Some select description.</small>
</label>

<label class="sel-mul ghost danger" for="sel-mul__ghost-07">
  <span>Select multiple .ghost.danger</span>
  <select id="sel-mul__ghost-07" aria-describedby="sel-mul__ghost-07--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__ghost-07--description">Some select description.</small>
</label>
Select multiple .sel-mul and .ghost variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Select multiple sizes



<label class="sel-mul xs" for="sel-mul__size-01">
  <span>Select multiple .xs</span>
  <select id="sel-mul__size-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul sm" for="sel-mul__size-02">
  <span>Select multiple .sm</span>
  <select id="sel-mul__size-02" multiple>
    <option value="">Options...</option>
  </select>
</label>

<label class="sel-mul md" for="sel-mul__size-03">
  <span>Select multiple .md</span>
  <select id="sel-mul__size-03" multiple>
    <option value="">Options...</option>
  </select>
</label>

<label class="sel-mul lg" for="sel-mul__size-04">
  <span>Select multiple .lg</span>
  <select id="sel-mul__size-04" multiple>
    <option value="">Options...</option>
  </select>
</label>
Select multiple sizes: .xs, .sm, .md and .lg.
Select multiple shapes


<label class="sel-mul capsule" for="sel-mul__shape-01">
  <span>Select multiple .capsule</span>
  <select id="sel-mul__shape-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul round" for="sel-mul__shape-02">
  <span>Select multiple .round</span>
  <select id="sel-mul__shape-02" multiple>
    <option value="">Options...</option>
  </select>
</label>

<label class="sel-mul square" for="sel-mul__shape-03">
  <span>Select multiple .square</span>
  <select id="sel-mul__shape-03" multiple>
    <option value="">Options...</option>
  </select>
</label>
Select multiple shapes: .capsule, .round and .square.
Select multiple block

<label class="sel-mul block" for="sel-mul__block-01">
  <span>Select multiple block</span>
  <select id="sel-mul__block-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul block" for="sel-mul__block-02">
  <span>Select multiple block</span>
  <select id="sel-mul__block-02" aria-describedby="sel-mul__block-02--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__block-02--description">Some select description.</small>
</label>
Select multiple .sel-mul and .solid variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Select multiple text-hide

<label class="sel-mul text--hide" for="sel-mul__text-hide-01">
  <span>Select multiple text-hide</span>
  <select id="sel-mul__text-hide-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul text--hide" for="sel-mul__text-hide-02">
  <span>Select multiple text-hide</span>
  <select id="sel-mul__text-hide-02" aria-describedby="sel-mul__text-hide-02--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__text-hide-02--description">Some select description.</small>
</label>
Select multiple .sel-mul .text--hide, and select multiple with description.
Select multiple vertical

<label class="sel-mul v" for="sel-mul__vertical-01">
  <span>Select multiple vertical</span>
  <select id="sel-mul__vertical-01" multiple>
    <option value="">Options...</option>
    <optgroup label="Option group 1">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
    </optgroup>
    <optgroup label="Option group 2">
      <option value="">Option 3</option>
      <option value="">Option 4</option>
    </optgroup>
  </select>
</label>

<label class="sel-mul v" for="sel-mul__vertical-02">
  <span>Select multiple vertical</span>
  <select id="sel-mul__vertical-02" aria-describedby="sel-mul__vertical-02--description" multiple>
    <option value="">Options...</option>
  </select>
  <small id="sel-mul__vertical-02--description">Some select description.</small>
</label>
Select multiple .sel-mul .v vertical, and select multiple with description.

Switch

Switch elements accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Text hide
.text--hide
<label class="swc" for="swc-01">
  <span>Switch</span>
  <input id="swc-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc disabled" for="swc-02">
  <span>Switch disabled</span>
  <input id="swc-02" type="checkbox" disabled>
  <span class="thumb"></span>
</label>

<label class="swc" for="swc-03">
  <span>Switch with icon</span>
  <input id="swc-03" type="checkbox">
  <span class="thumb">
    <svg viewbox="0 0 32 32" aria-hidden="true">...</svg>
  </span>
</label>
Switch .swc, switch disabled and switch with icon.
Switch looks






<label class="swc" for="swc__look-01">
  <span>Switch default</span>
  <input id="swc__look-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc primary" for="swc__look-02">
  <span>Switch .primary</span>
  <input id="swc__look-02" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc secondary" for="swc__look-03">
  <span>Switch .secondary</span>
  <input id="swc__look-03" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc success" for="swc__look-04">
  <span>Switch .success</span>
  <input id="swc__look-04" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc info" for="swc__look-05">
  <span>Switch .info</span>
  <input id="swc__look-05" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc warning" for="swc__look-06">
  <span>Switch .warning</span>
  <input id="swc__look-06" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc danger" for="swc__look-07">
  <span>Switch .danger</span>
  <input id="swc__look-07" type="checkbox">
  <span class="thumb"></span>
</label>
Switch .swc variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Switch sizes
<label class="swc xs" for="swc__size-01">
  <span>Switch .xs</span>
  <input id="swc__size-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc sm" for="swc__size-02">
  <span>Switch .sm</span>
  <input id="swc__size-02" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc md" for="swc__size-03">
  <span>Switch .md</span>
  <input id="swc__size-03" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc lg" for="swc__size-04">
  <span>Switch .lg</span>
  <input id="swc__size-04" type="checkbox">
  <span class="thumb"></span>
</label>
Switch .swc sizes: .xs, .sm, .md and .lg.
Switch shapes
<label class="swc capsule" for="swc__shape-01">
  <span>Switch .capsule</span>
  <input id="swc__shape-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc round" for="swc__shape-02">
  <span>Switch .round</span>
  <input id="swc__shape-02" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc square" for="swc__shape-03">
  <span>Switch .square</span>
  <input id="swc__shape-03" type="checkbox">
  <span class="thumb"></span>
</label>
Switch .swc shapes: .capsule, .round and .square.
Switch block
<label class="swc block" for="swc__block-01">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita <del>fit ut, quanta differentia est in principiis naturalibus,</del> tanta sit in finibus bonorum malorumque dissimilitudo. <em>Sed ille, ut dixi, vitiose.</em> Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Duo Reges: constructio interrete. <mark>Nam quid possumus facere melius?</mark> <mark>Qui est in parvis malis.</mark> Rem unam praeclarissimam omnium maximeque laudandam, penitus viderent, quonam gaudio complerentur, cum tantopere eius adumbrata opinione laetentur? <strong>Quod cum dixissent, ille contra.</strong> <a href="http://loripsum.net/" target="_blank">Quare conare, quaeso</a>.</span>
  <input id="swc__block-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc block" for="swc__block-02">
  <span>Lorem ipsum...</span>
  <input id="swc__block-02" type="checkbox">
  <span class="thumb">
    <svg viewbox="0 0 32 32" aria-hidden="true">...</svg>
  </span>
</label>
Switch block .swc.block and switch with icon.
Switch text-hide
<label class="swc text--hide" for="swc__text-hide-01">
  <span>Lorem ipsum dolor sit amet</span>
  <input id="swc__text-hide-01" type="checkbox">
  <span class="thumb"></span>
</label>

<label class="swc text--hide" for="swc__text-hide-02">
  <span>Lorem ipsum dolor sit amet</span>
  <input id="swc__text-hide-02" type="checkbox">
  <span class="thumb">
    <svg viewbox="0 0 32 32" aria-hidden="true">
      ...
    </svg>
  </span>
</label>
Switch text-hide .swc.text--hide and switch with icon.

Range

Range elements accept this set of classes:

Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Sizes
.xs, .sm, .md and .lg
Shapes
.capsule, .round and .square
Block
.block
Text hide
.text--hide
Vertical
.v


<label class="rng" for="range-01">
  <span>Range</span>
  <input id="range-01" type="range">
</label>

<label class="rng disabled" for="range-02">
  <span>Range disabled</span>
  <input id="range-02" type="range" disabled>
</label>

<label class="rng" for="range-03">
  <span>Range</span>
  <input id="range-03" aria-describedby="range-03--description" type="range">
  <small id="range-03--description">Some range description.</small>
</label>
Default range .rng, range disabled, and range with description.
Range looks






<label class="rng" for="rng__look-01">
  <span>Range default</span>
  <input id="rng__look-01" aria-describedby="rng__look-01--description" type="range">
  <small id="rng__look-01--description">Some range description.</small>
</label>

<label class="rng primary" for="rng__look-02">
  <span>Range .primary</span>
  <input id="rng__look-02" aria-describedby="rng__look-02--description" type="range">
  <small id="rng__look-02--description">Some range description.</small>
</label>

<label class="rng secondary" for="rng__look-03">
  <span>Range .secondary</span>
  <input id="rng__look-03" aria-describedby="rng__look-03--description" type="range">
  <small id="rng__look-03--description">Some range description.</small>
</label>

<label class="rng success" for="rng__look-04">
  <span>Range .success</span>
  <input id="rng__look-04" aria-describedby="rng__look-04--description" type="range">
  <small id="rng__look-04--description">Some range description.</small>
</label>

<label class="rng info" for="rng__look-05">
  <span>Range .info</span>
  <input id="rng__look-05" aria-describedby="rng__look-05--description" type="range">
  <small id="rng__look-05--description">Some range description.</small>
</label>

<label class="rng warning" for="rng__look-06">
  <span>Range .warning</span>
  <input id="rng__look-06" aria-describedby="rng__look-06--description" type="range">
  <small id="rng__look-06--description">Some range description.</small>
</label>

<label class="rng danger" for="rng__look-07">
  <span>Range .danger</span>
  <input id="rng__look-07" aria-describedby="rng__look-07--description" type="range">
  <small id="rng__look-07--description">Some range description.</small>
</label>
Range .rng variants: default, .primary, .secondary, .success, .info, .warning and .danger.
Range sizes
<label class="rng xs" for="rng__size-01">
  <span>Range .xs</span>
  <input id="rng__size-01" type="range">
</label>

<label class="rng sm" for="rng__size-02">
  <span>Range .sm</span>
  <input id="rng__size-02" type="range">
</label>

<label class="rng md" for="rng__size-03">
  <span>Range .md</span>
  <input id="rng__size-03" type="range">
</label>

<label class="rng lg" for="rng__size-04">
  <span>Range .lg</span>
  <input id="rng__size-04" type="range">
</label>
Range .rng sizes: .xs, .sm, .md and .lg.
Range shapes
<label class="rng capsule" for="rng__shape-01">
  <span>Range .capsule</span>
  <input id="rng__shape-01" type="range">
</label>

<label class="rng round" for="rng__shape-02">
  <span>Range .round</span>
  <input id="rng__shape-02" type="range">
</label>

<label class="rng square" for="rng__shape-03">
  <span>Range .square</span>
  <input id="rng__shape-03" type="range">
</label>
Range .rng shapes: .capsule, .round and .square.
Range block

<label class="rng block" for="rng__block-01">
  <span>Range .block</span>
  <input id="rng__block-01" type="range">
</label>

<label class="rng block" for="rng__block-02">
  <span>Range .block</span>
  <input id="rng__block-02" aria-describedby="rng__block-02--description" type="range">
  <small id="rng__block-02--description">Some range description.</small>
</label>
Range .block, and range block with description.
Range text-hide

<label class="rng text--hide" for="rng__text-hide-01">
  <span>Range .text--hide</span>
  <input id="rng__text-hide-01" type="range">
</label>

<label class="rng text--hide" for="rng__text-hide-02">
  <span>Range .text--hide</span>
  <input id="rng__text-hide-02" aria-describedby="rng__text-hide-02--description" type="range">
  <small id="rng__text-hide-02--description">Some range description.</small>
</label>
Range .text--hide, and range .text--hide with description.
Range vertical

<label class="rng v" for="rng__vertical-01">
  <span>Range .v</span>
  <input id="rng__vertical-01" type="range">
</label>

<label class="rng v" for="rng__vertical-02">
  <span>Range .v</span>
  <input id="2" aria-describedby="rng__vertical-02--description" type="range">
  <small id="rng__vertical-02--description">Some range description.</small>
</label>
Range vertical .v, and range with description.