Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost

Badge

Renders a badge.
options:

  • -uppercase: badge text in uppercase
<span class="prismea-badge -rounded prismea-horizontal-spacing-5--slot">Badge</span><span class="prismea-badge -rounded -uppercase prismea-horizontal-spacing-5--slot">Badge</span><span class="prismea-badge -rounded -primary -uppercase prismea-horizontal-spacing-5--slot">primary</span><span class="prismea-badge -rounded -secondary -uppercase prismea-horizontal-spacing-5--slot">secondary</span><span class="prismea-badge -rounded -tertiary -uppercase prismea-horizontal-spacing-5--slot">tertiary</span><span class="prismea-badge -rounded -positive -uppercase prismea-horizontal-spacing-5--slot">positive</span><span class="prismea-badge -rounded -pending -uppercase prismea-horizontal-spacing-5--slot">pending</span><span class="prismea-badge -rounded -negative -uppercase prismea-horizontal-spacing-5--slot">negative</span><span class="prismea-badge -rounded -grey1 -uppercase prismea-horizontal-spacing-5--slot">grey1</span><span class="prismea-badge -rounded -grey2 -uppercase prismea-horizontal-spacing-5--slot">grey2</span><span class="prismea-badge -rounded -grey3 -uppercase prismea-horizontal-spacing-5--slot">grey3</span><span class="prismea-badge -rounded -grey4 -uppercase prismea-horizontal-spacing-5--slot">grey4</span><span class="prismea-badge -rounded -category1 -uppercase prismea-horizontal-spacing-5--slot">category1</span><span class="prismea-badge -rounded -category2 -uppercase prismea-horizontal-spacing-5--slot">category2</span><span class="prismea-badge -rounded -category3 -uppercase prismea-horizontal-spacing-5--slot">category3</span><span class="prismea-badge -rounded -category4 -uppercase prismea-horizontal-spacing-5--slot">category4</span>
span.prismea-badge.-rounded.prismea-horizontal-spacing-5--slot Badge
span.prismea-badge.-rounded.-uppercase.prismea-horizontal-spacing-5--slot Badge
span.prismea-badge.-rounded.-primary.-uppercase.prismea-horizontal-spacing-5--slot primary
span.prismea-badge.-rounded.-secondary.-uppercase.prismea-horizontal-spacing-5--slot secondary
span.prismea-badge.-rounded.-tertiary.-uppercase.prismea-horizontal-spacing-5--slot tertiary
span.prismea-badge.-rounded.-positive.-uppercase.prismea-horizontal-spacing-5--slot positive
span.prismea-badge.-rounded.-pending.-uppercase.prismea-horizontal-spacing-5--slot pending
span.prismea-badge.-rounded.-negative.-uppercase.prismea-horizontal-spacing-5--slot negative
span.prismea-badge.-rounded.-grey1.-uppercase.prismea-horizontal-spacing-5--slot grey1
span.prismea-badge.-rounded.-grey2.-uppercase.prismea-horizontal-spacing-5--slot grey2
span.prismea-badge.-rounded.-grey3.-uppercase.prismea-horizontal-spacing-5--slot grey3
span.prismea-badge.-rounded.-grey4.-uppercase.prismea-horizontal-spacing-5--slot grey4
span.prismea-badge.-rounded.-category1.-uppercase.prismea-horizontal-spacing-5--slot category1
span.prismea-badge.-rounded.-category2.-uppercase.prismea-horizontal-spacing-5--slot category2
span.prismea-badge.-rounded.-category3.-uppercase.prismea-horizontal-spacing-5--slot category3
span.prismea-badge.-rounded.-category4.-uppercase.prismea-horizontal-spacing-5--slot category4

Color

Can change on hover: primary, secondary & tertiary

<span class="prismea-color prismea-horizontal-spacing-5--slot">black</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-primary">primary</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-secondary">secondary</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-tertiary">tertiary</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-positive">positive</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-pending">pending</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-negative">negative</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey1">grey1</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey2">grey2</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey3">grey3</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey4">grey4</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey5">grey5</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category1">category1</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category2">category2</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category3">category3</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category4">category4</span>
<h4>Hovers</h4><span class="prismea-color prismea-horizontal-spacing-5--slot -color-primary-hover">primary-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-secondary-hover">secondary-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-tertiary-hover">tertiary-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-positive-hover">positive-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-pending-hover">pending-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-negative-hover">negative-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey1-hover">grey1-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey2-hover">grey2-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey3-hover">grey3-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-grey4-hover">grey4-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category1-hover">category1-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category2-hover">category2-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category3-hover">category3-hover</span><span class="prismea-color prismea-horizontal-spacing-5--slot -color-category4-hover">category4-hover</span>
span.prismea-color.prismea-horizontal-spacing-5--slot black
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-primary primary
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-secondary secondary
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-tertiary tertiary
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-positive positive
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-pending pending
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-negative negative
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey1 grey1
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey2 grey2
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey3 grey3
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey4 grey4
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey5 grey5
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category1 category1
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category2 category2
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category3 category3
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category4 category4
h4 Hovers
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-primary-hover primary-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-secondary-hover secondary-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-tertiary-hover tertiary-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-positive-hover positive-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-pending-hover pending-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-negative-hover negative-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey1-hover grey1-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey2-hover grey2-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey3-hover grey3-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-grey4-hover grey4-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category1-hover category1-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category2-hover category2-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category3-hover category3-hover
span.prismea-color.prismea-horizontal-spacing-5--slot.-color-category4-hover category4-hover

Button

Modifiers:

  • -hidden (visibility: hidden;)
<h2>Primary</h2>
<h4>Active</h4>
<button class="prismea-button -primary" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -primary -pill" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -primary -pill -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -primary -pill -outlined" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -primary -pill -outlined -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h4>Disabled</h4>
<button class="prismea-button -primary" disabled="disabled" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -primary -pill" disabled="disabled" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -primary -pill -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -primary -pill -outlined" disabled="disabled" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -primary -pill -outlined -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h2>Secondary</h2>
<h4>Active</h4>
<button class="prismea-button -secondary" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -secondary -pill" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -secondary -pill -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -secondary -pill -outlined" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -secondary -pill -outlined -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h4>Disabled</h4>
<button class="prismea-button -secondary" disabled="disabled" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -secondary -pill" disabled="disabled" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -secondary -pill -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -secondary -pill -outlined" disabled="disabled" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -secondary -pill -outlined -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h2>Tertiary</h2>
<h4>Active</h4>
<button class="prismea-button -tertiary" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -tertiary -pill" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -tertiary -pill -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -tertiary -pill -outlined" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -tertiary -pill -outlined -icon-text" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h4>Disabled</h4>
<button class="prismea-button -tertiary" disabled="disabled" style="margin: 0 5px;">Default
</button>
<button class="prismea-button -tertiary -pill" disabled="disabled" style="margin: 0 5px;">Rounded
</button>
<button class="prismea-button -tertiary -pill -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Rounded with icon</span>
</button>
<button class="prismea-button -tertiary -pill -outlined" disabled="disabled" style="margin: 0 5px;">Outlined
</button>
<button class="prismea-button -tertiary -pill -outlined -icon-text" disabled="disabled" style="margin: 0 5px;"><i class="prismea-glyph-16_add"></i><span>Outlined with icon</span>
</button>
<h2>Transparent</h2>
<button class="prismea-button -link" style="margin: 0 5px;">Default button
</button>
<button class="prismea-button -link" disabled="disabled" style="margin: 0 5px;">Disabled
</button>
h2 Primary
h4 Active
button.prismea-button.-primary(style='margin: 0 5px;').
  Default
  
button.prismea-button.-primary.-pill(style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-primary.-pill.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-primary.-pill.-outlined(style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-primary.-pill.-outlined.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h4 Disabled
button.prismea-button.-primary(disabled, style='margin: 0 5px;').
  Default
  
button.prismea-button.-primary.-pill(disabled, style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-primary.-pill.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-primary.-pill.-outlined(disabled, style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-primary.-pill.-outlined.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h2 Secondary
h4 Active
button.prismea-button.-secondary(style='margin: 0 5px;').
  Default
  
button.prismea-button.-secondary.-pill(style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-secondary.-pill.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-secondary.-pill.-outlined(style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-secondary.-pill.-outlined.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h4 Disabled
button.prismea-button.-secondary(disabled, style='margin: 0 5px;').
  Default
  
button.prismea-button.-secondary.-pill(disabled, style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-secondary.-pill.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-secondary.-pill.-outlined(disabled, style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-secondary.-pill.-outlined.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h2 Tertiary
h4 Active
button.prismea-button.-tertiary(style='margin: 0 5px;').
  Default
  
button.prismea-button.-tertiary.-pill(style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-tertiary.-pill.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-tertiary.-pill.-outlined(style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-tertiary.-pill.-outlined.-icon-text(style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h4 Disabled
button.prismea-button.-tertiary(disabled, style='margin: 0 5px;').
  Default
  
button.prismea-button.-tertiary.-pill(disabled, style='margin: 0 5px;').
  Rounded
  
button.prismea-button.-tertiary.-pill.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Rounded with icon
button.prismea-button.-tertiary.-pill.-outlined(disabled, style='margin: 0 5px;').
  Outlined
  
button.prismea-button.-tertiary.-pill.-outlined.-icon-text(disabled, style='margin: 0 5px;')
  i.prismea-glyph-16_add
  span Outlined with icon
h2 Transparent
button.prismea-button.-link(style='margin: 0 5px;').
  Default button
  
button.prismea-button.-link(disabled, style='margin: 0 5px;').
  Disabled
  

Icon

Can have a circle background with the class -circle.
You can then customize the background color width for example -primary and glyph color with -color-primary

<i class="prismea-icon prismea-glyph-24_dashboard"></i><i class="prismea-icon -x2 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x3 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x4 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -color-light -circle -primary prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -color-light -circle -secondary prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -color-light -circle -tertiary prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -pending prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -positive prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -negative prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -grey1 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -grey2 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -grey3 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -grey4 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -category1 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -category2 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -category3 prismea-glyph-24_dashboard"></i><i class="prismea-icon -x1 -circle -category4 prismea-glyph-24_dashboard"></i>
i.prismea-icon.prismea-glyph-24_dashboard
i.prismea-icon.-x2.prismea-glyph-24_dashboard
i.prismea-icon.-x3.prismea-glyph-24_dashboard
i.prismea-icon.-x4.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-color-light.-circle.-primary.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-color-light.-circle.-secondary.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-color-light.-circle.-tertiary.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-pending.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-positive.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-negative.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-grey1.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-grey2.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-grey3.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-grey4.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-category1.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-category2.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-category3.prismea-glyph-24_dashboard
i.prismea-icon.-x1.-circle.-category4.prismea-glyph-24_dashboard

Icon button

<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button" disabled="disabled"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -faded"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -selected"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle" disabled="disabled"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle -faded"><i class="prismea-icon-button--icon prismea-glyph-16_pending"></i></button>
<button class="prismea-icon-button -circle -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
<button class="prismea-icon-button -circle -selected -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_admin"></i></button>
button.prismea-icon-button
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button(disabled)
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-faded
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-invisible
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-selected
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-circle.-color-primary
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle(disabled)
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle.-faded
  i.prismea-icon-button--icon.prismea-glyph-16_pending
button.prismea-icon-button.-circle.-invisible
  i.prismea-icon-button--icon.prismea-glyph-16_admin
button.prismea-icon-button.-circle.-selected.-color-primary
  i.prismea-icon-button--icon.prismea-glyph-16_admin

Input

Autocomplete

Especially used in:

  • InputFieldAddressComponent
<div class="prismea-input">
  <div class="prismea-input--container prismea-autocomplete--field"><span class="prismea-input--placeholder">Adresse</span>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input">
  <div class="prismea-input--container prismea-autocomplete--field -typed"><span class="prismea-input--placeholder">Adresse</span>
    <input type="text" value="3 Route du"/>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input -error">
  <div class="prismea-input--container prismea-autocomplete--field"><span class="prismea-input--placeholder">Adresse</span>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input -error">
  <div class="prismea-input--container prismea-autocomplete--field -typed"><span class="prismea-input--placeholder">Adresse</span>
    <input type="text" value="3 Route du"/>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input">
  <div class="prismea-input--container prismea-autocomplete--field -open -typed"><span class="prismea-input--placeholder">Adresse</span>
    <input type="text" value="3 Route du"/>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">3 Route du Général de Gaulle</li>
      <li class="prismea-autocomplete--option">3 Route du Perlinpinpin</li>
      <li class="prismea-autocomplete--option">3 Route du Rocher</li>
    </ul>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
.prismea-input
  .prismea-input--container.prismea-autocomplete--field
    span.prismea-input--placeholder Adresse
  .prismea-input--error
    span Something bad happened
.prismea-input
  .prismea-input--container.prismea-autocomplete--field.-typed
    span.prismea-input--placeholder Adresse
    input(type='text', value='3 Route du')
  .prismea-input--error
    span Something bad happened
.prismea-input.-error
  .prismea-input--container.prismea-autocomplete--field
    span.prismea-input--placeholder Adresse
  .prismea-input--error
    span Something bad happened
.prismea-input.-error
  .prismea-input--container.prismea-autocomplete--field.-typed
    span.prismea-input--placeholder Adresse
    input(type='text', value='3 Route du')
  .prismea-input--error
    span Something bad happened
.prismea-input
  .prismea-input--container.prismea-autocomplete--field.-open.-typed
    span.prismea-input--placeholder Adresse
    input(type='text', value='3 Route du')
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option 3 Route du Général de Gaulle
      li.prismea-autocomplete--option 3 Route du Perlinpinpin
      li.prismea-autocomplete--option 3 Route du Rocher
  .prismea-input--error
    span Something bad happened

Checkbox

3 states:

  • Empty
  • Checked
  • Checked (disabled)
<div class="prismea-checkbox" style="margin-bottom: 15px;">
  <input type="checkbox" id="1" onclick=""/>
  <label for="1"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
<div class="prismea-checkbox" style="margin-bottom: 15px;">
  <input type="checkbox" id="2" checked="checked" onclick=""/>
  <label for="2"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
  <input type="checkbox" id="3" checked="checked" onclick="return false;"/>
  <label for="3"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
  </label>
</div>
.prismea-checkbox(style='margin-bottom: 15px;')
  input#1(type='checkbox')
  label(for='1')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light
.prismea-checkbox(style='margin-bottom: 15px;')
  input#2(type='checkbox', checked)
  label(for='2')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
  input#3(type='checkbox', checked, onclick='return false;')
  label(for='3')
    i.prismea-icon.prismea-glyph-16_checkbox.-color-light

Input Pin Code

<div class="prismea-input-pin-code">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="0"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="9"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="3"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="6"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code -error">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code -error">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="0"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="9"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="3"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="6"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container">
            <input maxlength="1" type="text" value=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="0"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="9"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="3"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input -disabled">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="text" value="6"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-pin-code">
  <div class="prismea-vertical-spacing-10">
    <div class="prismea-vertical-spacing-10--slot"><span class="prismea-input-pin-code--label">Entrez votre code PIN</span></div>
    <div class="prismea-vertical-spacing-10--slot prismea-horizontal-spacing-20 prismea-input-pin-code--collection">
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="0"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="9"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="3"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="4"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="2"/>
          </div>
        </div>
      </div>
      <div class="prismea-horizontal-spacing-20--slot">
        <div class="prismea-input">
          <div class="prismea-input--container -typed">
            <input maxlength="1" type="password" value="6"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-input-pin-code--error"><span>Something bad happened</span></div>
</div>
.prismea-input-pin-code
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='0')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='9')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='3')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='6')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code.-error
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container
            input(maxlength='1', type='text')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code.-error
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='0')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='9')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='3')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='6')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container
            input(maxlength='1', type='text')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='0')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='9')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='3')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input.-disabled
          .prismea-input--container.-typed
            input(maxlength='1', type='text', value='6')
  .prismea-input-pin-code--error
    span Something bad happened
.prismea-input-pin-code
  .prismea-vertical-spacing-10
    .prismea-vertical-spacing-10--slot
      span.prismea-input-pin-code--label Entrez votre code PIN
    .prismea-vertical-spacing-10--slot.prismea-horizontal-spacing-20.prismea-input-pin-code--collection
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='0')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='9')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='3')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='4')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='2')
      .prismea-horizontal-spacing-20--slot
        .prismea-input
          .prismea-input--container.-typed
            input(maxlength='1', type='password', value='6')
  .prismea-input-pin-code--error
    span Something bad happened

Input file

<div class="prismea-input-file   ">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-24_link"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-file  -draggable ">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-24_link"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-file   -added">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container">
      <div class="prismea-input-file--added"><span>Document</span><span>filename-uploaded.pdf</span></div><strong class="prismea-input-file--reset"><i class="prismea-glyph-16_close"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-file -error  -added">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container">
      <div class="prismea-input-file--added"><span>Document</span><span>filename-uploaded.pdf</span></div><strong class="prismea-input-file--reset"><i class="prismea-glyph-16_close"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input-file   ">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-16_close"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--container-multiple-file">
    <div class="prismea-input-file--wrapper-filename"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_01.pdf</span></div>
    </div>
    <div class="prismea-input-file--wrapper-filename"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_02.pdf</span>
      </div>
    </div>
    <div class="prismea-input-file--wrapper-filename"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_03.pdf</span>
      </div>
    </div>
  </div>
</div>
<div class="prismea-input-file   ">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-16_close"></i></strong></span></label>
  <input id="prismea-input-file" type="file"/>
  <div class="prismea-input-file--container-multiple-file">
    <div class="prismea-input-file--wrapper-filename"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_01.pdf</span></div>
    </div>
    <div class="prismea-input-file--wrapper-filename -error"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_02.pdf</span>
        <div class="prismea-input-file--error"><span>Something bad happened</span></div>
      </div>
    </div>
    <div class="prismea-input-file--wrapper-filename -error"><i class="prismea-glyph-16_close"></i>
      <div class="prismea-input-file--filename"><span>filename-uploaded_03.pdf</span>
        <div class="prismea-input-file--error"><span>Something bad happened</span></div>
      </div>
    </div>
  </div>
</div>
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-24_link
  input#prismea-input-file(type='file')
  .prismea-input-file--error
    span Something bad happened
.prismea-input-file.-draggable
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-24_link
  input#prismea-input-file(type='file')
  .prismea-input-file--error
    span Something bad happened
.prismea-input-file.-added
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      .prismea-input-file--added
        span Document
        span filename-uploaded.pdf
      strong.prismea-input-file--reset
        i.prismea-glyph-16_close
  input#prismea-input-file(type='file')
  .prismea-input-file--error
    span Something bad happened
.prismea-input-file.-error.-added
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      .prismea-input-file--added
        span Document
        span filename-uploaded.pdf
      strong.prismea-input-file--reset
        i.prismea-glyph-16_close
  input#prismea-input-file(type='file')
  .prismea-input-file--error
    span Something bad happened
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-16_close
  input#prismea-input-file(type='file')
  .prismea-input-file--container-multiple-file
    .prismea-input-file--wrapper-filename
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_01.pdf
    .prismea-input-file--wrapper-filename
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_02.pdf
    .prismea-input-file--wrapper-filename
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_03.pdf
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-16_close
  input#prismea-input-file(type='file')
  .prismea-input-file--container-multiple-file
    .prismea-input-file--wrapper-filename
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_01.pdf
    .prismea-input-file--wrapper-filename.-error
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_02.pdf
        .prismea-input-file--error
          span Something bad happened
    .prismea-input-file--wrapper-filename.-error
      i.prismea-glyph-16_close
      .prismea-input-file--filename
        span filename-uploaded_03.pdf
        .prismea-input-file--error
          span Something bad happened

Input range

<div class="prismea-input prismea-input-range  " style="--min:0; --max:100; --value:0; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
  <div class="prismea-input--container prismea-input-range--container"><span class="prismea-input--placeholder">Default Input range</span>
    <input class="prismea-input-range--input" type="range" value="" min="0" max="100" step="10"/>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input prismea-input-range  " style="--min:0; --max:100; --value:30; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
  <div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">Filled input range</span>
    <input class="prismea-input-range--input" type="range" value="30" min="0" max="100" step="10"/>
    <output class="prismea-input-range--output-up">30</output>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input prismea-input-range  -error " style="--min:0; --max:100; --value:30; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
  <div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">Filled input range</span>
    <input class="prismea-input-range--input" type="range" value="30" min="0" max="100" step="10"/>
    <output class="prismea-input-range--output-up">30</output>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input prismea-input-range  " style="--min:0; --max:100; --value:50; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
  <div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">Click on range for hover state</span>
    <input class="prismea-input-range--input" type="range" value="50" min="0" max="100" step="10"/>
    <output class="prismea-input-range--output-up">50</output>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input prismea-input-range  " style="--min:0; --max:100; --value:50; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
  <div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">With a validate button</span>
    <input class="prismea-input-range--input" type="range" value="50" min="0" max="100" step="10"/>
    <output class="prismea-input-range--output-up">50</output>
    <output class="prismea-input-range--output-down">Valider</output>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
.prismea-input.prismea-input-range(style='--min:0; --max:100; --value:0; --text-min:"0"; --text-max:"100";')
  .prismea-input--container.prismea-input-range--container
    span.prismea-input--placeholder Default Input range
    input.prismea-input-range--input(type='range', min='0', max='100', step='10')
  .prismea-input--error
    span Something bad happened
.prismea-input.prismea-input-range(style='--min:0; --max:100; --value:30; --text-min:"0"; --text-max:"100";')
  .prismea-input--container.prismea-input-range--container.-typed
    span.prismea-input--placeholder Filled input range
    input.prismea-input-range--input(type='range', value='30', min='0', max='100', step='10')
    output.prismea-input-range--output-up 30
  .prismea-input--error
    span Something bad happened
.prismea-input.prismea-input-range.-error(style='--min:0; --max:100; --value:30; --text-min:"0"; --text-max:"100";')
  .prismea-input--container.prismea-input-range--container.-typed
    span.prismea-input--placeholder Filled input range
    input.prismea-input-range--input(type='range', value='30', min='0', max='100', step='10')
    output.prismea-input-range--output-up 30
  .prismea-input--error
    span Something bad happened
.prismea-input.prismea-input-range(style='--min:0; --max:100; --value:50; --text-min:"0"; --text-max:"100";')
  .prismea-input--container.prismea-input-range--container.-typed
    span.prismea-input--placeholder Click on range for hover state
    input.prismea-input-range--input(type='range', value='50', min='0', max='100', step='10')
    output.prismea-input-range--output-up 50
  .prismea-input--error
    span Something bad happened
.prismea-input.prismea-input-range(style='--min:0; --max:100; --value:50; --text-min:"0"; --text-max:"100";')
  .prismea-input--container.prismea-input-range--container.-typed
    span.prismea-input--placeholder With a validate button
    input.prismea-input-range--input(type='range', value='50', min='0', max='100', step='10')
    output.prismea-input-range--output-up 50
    output.prismea-input-range--output-down Valider
  .prismea-input--error
    span Something bad happened

Input text

<div class="prismea-input   ">
  <div class="prismea-input--container"><span class="prismea-input--placeholder">Default input</span>
    <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input   ">
  <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Mighty text</span>
    <input type="text" value="Typed input"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input -error  ">
  <div class="prismea-input--container"><span class="prismea-input--placeholder">Error not typed</span>
    <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input -error  ">
  <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Error typed</span>
    <input type="text" value="Typed input"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input  -disabled ">
  <div class="prismea-input--container"><span class="prismea-input--placeholder">Disabled</span>
    <input type="text" value="" disabled="disabled"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input  -disabled ">
  <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Disabled</span>
    <input type="text" value="Typed input" disabled="disabled"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input   ">
  <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Password</span>
    <input type="password" value="Typed input"/>
    <div class="prismea-input--actions">
      <div class="prismea-input--actions-item"><i class="prismea-glyph-12_see"></i>
      </div>
    </div>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input   ">
  <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Password</span>
    <input type="password" value="Typed input"/>
    <div class="prismea-input--actions">
      <div class="prismea-input--actions-item"><i class="prismea-glyph-12_see"></i><i class="prismea-glyph-12_delete"></i>
      </div>
    </div>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input   -with-icon">
  <div class="prismea-input--container">
    <div class="prismea-input--icon-prefix"><span class="prismea-text">€</span></div><span class="prismea-input--placeholder">Default input with icon</span>
    <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input   -with-icon">
  <div class="prismea-input--container -typed">
    <div class="prismea-input--icon-prefix"><span class="prismea-text">€</span></div><span class="prismea-input--placeholder">Mighty text</span>
    <input type="text" value="Typed input"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input -error  -with-icon">
  <div class="prismea-input--container">
    <div class="prismea-input--icon-prefix"><span class="prismea-text">€</span></div><span class="prismea-input--placeholder">Error</span>
    <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-input  -disabled -with-icon">
  <div class="prismea-input--container">
    <div class="prismea-input--icon-prefix"><span class="prismea-text">€</span></div><span class="prismea-input--placeholder">Disabled</span>
    <input type="text" value="" disabled="disabled"/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
  </div>
  <div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
.prismea-input
  .prismea-input--container
    span.prismea-input--placeholder Default input
    input(type='text')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input
  .prismea-input--container.-typed
    span.prismea-input--placeholder Mighty text
    input(type='text', value='Typed input')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-error
  .prismea-input--container
    span.prismea-input--placeholder Error not typed
    input(type='text')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-error
  .prismea-input--container.-typed
    span.prismea-input--placeholder Error typed
    input(type='text', value='Typed input')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-disabled
  .prismea-input--container
    span.prismea-input--placeholder Disabled
    input(type='text', disabled)
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-disabled
  .prismea-input--container.-typed
    span.prismea-input--placeholder Disabled
    input(type='text', value='Typed input', disabled)
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input
  .prismea-input--container.-typed
    span.prismea-input--placeholder Password
    input(type='password', value='Typed input')
    .prismea-input--actions
      .prismea-input--actions-item
        i.prismea-glyph-12_see
  .prismea-input--error
    span Something bad happened
.prismea-input
  .prismea-input--container.-typed
    span.prismea-input--placeholder Password
    input(type='password', value='Typed input')
    .prismea-input--actions
      .prismea-input--actions-item
        i.prismea-glyph-12_see
        i.prismea-glyph-12_delete
  .prismea-input--error
    span Something bad happened
.prismea-input.-with-icon
  .prismea-input--container
    .prismea-input--icon-prefix
      span.prismea-text €
    span.prismea-input--placeholder Default input with icon
    input(type='text')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-with-icon
  .prismea-input--container.-typed
    .prismea-input--icon-prefix
      span.prismea-text €
    span.prismea-input--placeholder Mighty text
    input(type='text', value='Typed input')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-error.-with-icon
  .prismea-input--container
    .prismea-input--icon-prefix
      span.prismea-text €
    span.prismea-input--placeholder Error
    input(type='text')
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened
.prismea-input.-disabled.-with-icon
  .prismea-input--container
    .prismea-input--icon-prefix
      span.prismea-text €
    span.prismea-input--placeholder Disabled
    input(type='text', disabled)
    i.prismea-input--icon-suffix.prismea-glyph-16_period
  .prismea-input--error
    span Something bad happened

Input toggle

<div class="prismea-input-toggle">
  <input type="checkbox" id="id79"/>
  <label for="id79">Option deactivated</label>
</div>
<div class="prismea-input-toggle">
  <input type="checkbox" id="id39" checked="checked"/>
  <label for="id39">Option activated</label>
</div>
.prismea-input-toggle
  input#id79(type='checkbox')
  label(for='id79') Option deactivated
.prismea-input-toggle
  input#id39(type='checkbox', checked)
  label(for='id39') Option activated

Select

<div class="prismea-select">
  <div class="prismea-select--field">
    <div class="prismea-input--placeholder">Please select an option (default)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text"></p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -typed">
    <div class="prismea-input--placeholder">Please select an option (selected)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text">Option 3</p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select -error">
  <div class="prismea-select--field -error">
    <div class="prismea-input--placeholder">Please select an option (with error)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text"></p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select -error">
  <div class="prismea-select--field -error -typed">
    <div class="prismea-input--placeholder">Please select an option (with error and typed)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text">Option 3</p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -disabled">
    <div class="prismea-input--placeholder">Please select an option (only one choice available so dropdown is disabled)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text"></p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -typed -disabled">
    <div class="prismea-input--placeholder">Please select an option (only one choice available so dropdown is disabled)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text">Option 3</p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -open" style="margin-bottom: 221px;">
    <div class="prismea-input--placeholder">Please select an option (default)</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text"></p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -typed -open" style="margin-bottom: 221px;">
    <div class="prismea-input--placeholder">Please select an option</div>
    <div class="prismea-select--input">
      <div class="prismea-select--label">
        <p class="prismea-text">Option 3 (open)</p>
      </div>
      <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
.prismea-select
  .prismea-select--field
    .prismea-input--placeholder Please select an option (default)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select
  .prismea-select--field.-typed
    .prismea-input--placeholder Please select an option (selected)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text Option 3
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select.-error
  .prismea-select--field.-error
    .prismea-input--placeholder Please select an option (with error)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select.-error
  .prismea-select--field.-error.-typed
    .prismea-input--placeholder Please select an option (with error and typed)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text Option 3
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select
  .prismea-select--field.-disabled
    .prismea-input--placeholder Please select an option (only one choice available so dropdown is disabled)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select
  .prismea-select--field.-typed.-disabled
    .prismea-input--placeholder Please select an option (only one choice available so dropdown is disabled)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text Option 3
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select
  .prismea-select--field.-open(style='margin-bottom: 221px;')
    .prismea-input--placeholder Please select an option (default)
    .prismea-select--input
      .prismea-select--label
        p.prismea-text
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened
.prismea-select
  .prismea-select--field.-typed.-open(style='margin-bottom: 221px;')
    .prismea-input--placeholder Please select an option
    .prismea-select--input
      .prismea-select--label
        p.prismea-text Option 3 (open)
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select--error
    span Something bad happened

Select button

<h4 style="margin-top: 0;">Closed</h4>
<div class="prismea-select-button">
  <div class="prismea-select-button--field">
    <div class="prismea-select-button--label prismea-text -text-sm"><span>Select</span></div>
    <div class="prismea-select-button--caret"><i class="prismea-glyph-12_caret-down"></i></div>
  </div>
  <div class="prismea-select-button--options">
    <div class="prismea-select-button--option -selected"><span class="prismea-text -text-sm">Option 1</span><i class="prismea-glyph-12_validate"></i></div>
    <div class="prismea-select-button--option"><span class="prismea-text -text-sm">Option 2</span></div>
    <div class="prismea-select-button--option"><span class="prismea-text -text-sm">Option 3</span></div>
  </div>
</div>
<h4>Open</h4>
<div class="prismea-select-button -open" style="margin-bottom: 100px;">
  <div class="prismea-select-button--field">
    <div class="prismea-select-button--label prismea-text -text-sm"><span>Select</span></div>
    <div class="prismea-select-button--caret"><i class="prismea-glyph-12_caret-down"></i></div>
  </div>
  <div class="prismea-select-button--options">
    <div class="prismea-select-button--option -selected"><span class="prismea-text -text-sm">Option 1</span><i class="prismea-glyph-12_validate"></i></div>
    <div class="prismea-select-button--option"><span class="prismea-text -text-sm">Option 2</span></div>
    <div class="prismea-select-button--option"><span class="prismea-text -text-sm">Option 3</span></div>
  </div>
</div>
h4(style='margin-top: 0;') Closed
.prismea-select-button
  .prismea-select-button--field
    .prismea-select-button--label.prismea-text.-text-sm
      span Select
    .prismea-select-button--caret
      i.prismea-glyph-12_caret-down
  .prismea-select-button--options
    .prismea-select-button--option.-selected
      span.prismea-text.-text-sm Option 1
      i.prismea-glyph-12_validate
    .prismea-select-button--option
      span.prismea-text.-text-sm Option 2
    .prismea-select-button--option
      span.prismea-text.-text-sm Option 3
h4 Open
.prismea-select-button.-open(style='margin-bottom: 100px;')
  .prismea-select-button--field
    .prismea-select-button--label.prismea-text.-text-sm
      span Select
    .prismea-select-button--caret
      i.prismea-glyph-12_caret-down
  .prismea-select-button--options
    .prismea-select-button--option.-selected
      span.prismea-text.-text-sm Option 1
      i.prismea-glyph-12_validate
    .prismea-select-button--option
      span.prismea-text.-text-sm Option 2
    .prismea-select-button--option
      span.prismea-text.-text-sm Option 3

Sidebar title

<h1 class="prismea-sidebar-title">Title</h1>
<h1 class="prismea-sidebar-title -capitalize">Title capitalized</h1>
<h1 class="prismea-sidebar-title -uppercase">Title uppercase</h1>
<h1 class="prismea-sidebar-title -center">Title centered aligned</h1>
<h1 class="prismea-sidebar-title -center -capitalize">Title centered and capitalized</h1>
<h1 class="prismea-sidebar-title -center -uppercase">Title centered and uppercase</h1>
h1.prismea-sidebar-title Title
h1.prismea-sidebar-title.-capitalize Title capitalized
h1.prismea-sidebar-title.-uppercase Title uppercase
h1.prismea-sidebar-title.-center Title centered aligned
h1.prismea-sidebar-title.-center.-capitalize Title centered and capitalized
h1.prismea-sidebar-title.-center.-uppercase Title centered and uppercase

Spacer

<div class="prismea-spacer -height-15 -primary"></div>
.prismea-spacer.-height-15.-primary

Text

Intro text

Particularly used in the off canvas content

<div class="prismea-text prismea-text--intro prismea-color -color-primary">
  Je suis un long texte d'intro pour expliquer les étapes suivantes. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
  Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
  Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
  Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
  Nunc in maximus tellus.
</div>
.prismea-text.prismea-text--intro.prismea-color.-color-primary.
  
  Je suis un long texte d'intro pour expliquer les étapes suivantes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
  
  • Menu-Label (.prismea-menu-label)
  • Menu-Label-Min (.prismea-menu-label.-min)
  • Menu-Label-Numeral (.prismea-menu-label.-min.prismea-numeral)
<div class="prismea-vertical-spacing-5">
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label">I am a regular menu label</span>
  </div>
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label -min">I am a Menu-Label-Min</span>
  </div>
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label -min prismea-numeral">I am a Menu-Label-Numeral</span>
  </div>
</div>
.prismea-vertical-spacing-5
  .prismea-vertical-spacing-5--slot
    span.prismea-menu-label I am a regular menu label
  .prismea-vertical-spacing-5--slot
    span.prismea-menu-label.-min I am a Menu-Label-Min
  .prismea-vertical-spacing-5--slot
    span.prismea-menu-label.-min.prismea-numeral I am a Menu-Label-Numeral

Sidebar text

  • Sidebar-Text (.prismea-sidebar-text)
  • Sidebar-Text-Min (.prismea-sidebar-text.-min)
<div class="prismea-vertical-spacing-5">
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-sidebar-text">I am a regular sidebar text</span>
  </div>
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-sidebar-text -min">I am a Sidebar-Text-Min</span>
  </div>
  <div class="prismea-vertical-spacing-5--slot"><span class="prismea-sidebar-text -min-link">I am a Sidebar-Text-Min-Link</span>
  </div>
</div>
.prismea-vertical-spacing-5
  .prismea-vertical-spacing-5--slot
    span.prismea-sidebar-text I am a regular sidebar text
  .prismea-vertical-spacing-5--slot
    span.prismea-sidebar-text.-min I am a Sidebar-Text-Min
  .prismea-vertical-spacing-5--slot
    span.prismea-sidebar-text.-min-link I am a Sidebar-Text-Min-Link

Title

<h1 class="prismea-title-1">Title 1</h1>
<h2 class="prismea-title-2">Title 2</h2>
<h3 class="prismea-title-3">Title 3</h3>
h1.prismea-title-1 Title 1
h2.prismea-title-2 Title 2
h3.prismea-title-3 Title 3