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.
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 category4Can 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-hoverModifiers:
-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
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<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_adminEspecially used in:
<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<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<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<div class="prismea-input prismea-input-range " style="--min:0; --max:100; --value:0; --text-min:"0"; --text-max:"100";">
<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:"0"; --text-max:"100";">
<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:"0"; --text-max:"100";">
<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:"0"; --text-max:"100";">
<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:"0"; --text-max:"100";">
<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<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<div class="prismea-input-toggle">
<input type="checkbox" id="id47"/>
<label for="id47">Option deactivated</label>
</div>
<div class="prismea-input-toggle">
<input type="checkbox" id="id4" checked="checked"/>
<label for="id4">Option activated</label>
</div>.prismea-input-toggle
input#id47(type='checkbox')
label(for='id47') Option deactivated
.prismea-input-toggle
input#id4(type='checkbox', checked)
label(for='id4') Option activated<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<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<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<div class="prismea-spacer -height-15 -primary"></div>.prismea-spacer.-height-15.-primaryParticularly 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.
.prismea-menu-label).prismea-menu-label.-min).prismea-menu-label.-min.prismea-numeral)<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label" style="display: block">I am a regular menu label</span>
</div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label -min" style="display: block">I am a Menu-Label-Min</span>
</div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-menu-label -min prismea-numeral" style="display: block">I am a Menu-Label-Numeral</span>
</div>
</div>.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span.prismea-menu-label(style='display: block') I am a regular menu label
.prismea-vertical-spacing-5--slot
span.prismea-menu-label.-min(style='display: block') I am a Menu-Label-Min
.prismea-vertical-spacing-5--slot
span.prismea-menu-label.-min.prismea-numeral(style='display: block') I am a Menu-Label-Numeral.prismea-sidebar-text).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<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