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

Avatar

Renders an avatar. If no image, return username initials.
options:

  • -square : default display avatar
  • -rounded: a rounded square avatar
  • -circle: a circle avatar
<div class="prismea-avatar">
  <p class="prismea-text">AL</p>
</div>
<div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
</div>
<div class="prismea-avatar -circle"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
</div>
.prismea-avatar
  p.prismea-text AL
.prismea-avatar.-rounded
  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
.prismea-avatar.-circle
  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')

Badge

Renders a badge.
options:

  • -block : it takes 100% of the available space
  • -rounded: a rounded badge
  • -uppercase: badge text in uppercase
<span class="prismea-badge">Badge
</span>
<span class="prismea-badge -uppercase">Badge
</span>
<span class="prismea-badge -classic">Badge
</span>
<span class="prismea-badge -negative">Badge
</span>
<span class="prismea-badge -positive">Badge
</span>
<span class="prismea-badge -neutral">Badge
</span>
<span class="prismea-badge -special">Badge
</span>
<span class="prismea-badge -classic-light">Badge
</span>
<div class="prismea-badge -block">Badge
</div>
<span class="prismea-badge -rounded">Badge
</span>
<span class="prismea-badge -uppercase -rounded">Badge
</span>
<span class="prismea-badge -classic -rounded">Badge
</span>
<span class="prismea-badge -negative -rounded">Badge
</span>
<span class="prismea-badge -positive -rounded">Badge
</span>
<span class="prismea-badge -neutral -rounded">Badge
</span>
<span class="prismea-badge -special -rounded">Badge
</span>
<span class="prismea-badge -classic-light -rounded">Badge
</span>
span.prismea-badge.
  Badge
  
span.prismea-badge.-uppercase.
  Badge
  
span.prismea-badge.-classic.
  Badge
  
span.prismea-badge.-negative.
  Badge
  
span.prismea-badge.-positive.
  Badge
  
span.prismea-badge.-neutral.
  Badge
  
span.prismea-badge.-special.
  Badge
  
span.prismea-badge.-classic-light.
  Badge
  
.prismea-badge.-block.
  Badge
  
span.prismea-badge.-rounded.
  Badge
  
span.prismea-badge.-uppercase.-rounded.
  Badge
  
span.prismea-badge.-classic.-rounded.
  Badge
  
span.prismea-badge.-negative.-rounded.
  Badge
  
span.prismea-badge.-positive.-rounded.
  Badge
  
span.prismea-badge.-neutral.-rounded.
  Badge
  
span.prismea-badge.-special.-rounded.
  Badge
  
span.prismea-badge.-classic-light.-rounded.
  Badge
  

Button

<button class="prismea-button">Button
</button>
<!-- Styles-->
<button class="prismea-button -link ">Link
</button>
<button class="prismea-button -link -color-positive ">Link with color
</button>
<button class="prismea-button -outlined ">Outlined
</button>
<button class="prismea-button -outlined " disabled="disabled">Outlined disabled
</button>
<button class="prismea-button -outlined  -inverse-on-hover">Outlined inverses on hover
</button>
<!-- States-->
<button class="prismea-button  -pending">Pending
</button>
<button class="prismea-button" disabled="disabled">Disabled
</button>
<button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
</button>
<button class="prismea-button  -icon-text"><i class="prismea-icon prismea-glyph-12_search"></i><span>Button with text and icon</span>
</button>
<!-- Shapes and sizes-->
<button class="prismea-button -short ">Short
</button>
<button class="prismea-button -wide ">Wide button (250px)
</button>
<button class="prismea-button -short -wide ">Wide short button
</button>
<button class="prismea-button  -pill">Pill with radius 20px
</button>
<button class="prismea-button -short  -pill">Pill short
</button>
<button class="prismea-button -wide  -pill">Pill wide
</button>
<button class="prismea-button -short -wide  -pill">Pill wide short
</button>
<button class="prismea-button -block ">Block
</button>
<!-- Themes-->
<button class="prismea-button -light ">Light
</button>
<button class="prismea-button -alert ">Alert
</button>
<button class="prismea-button -positive ">Positive
</button>
<button class="prismea-button -negative ">Negative
</button>
<button class="prismea-button -warning ">Warning
</button>
<button class="prismea-button -special ">Special
</button>
<button class="prismea-button -faded ">Faded
</button>
<button class="prismea-button -neutral ">Neutral
</button>
<button class="prismea-button -alert-light ">Alert light
</button>
<button class="prismea-button -alert-dark ">Alert dark
</button>
<button class="prismea-button -alert-darker ">Alert darker
</button>
<!-- Compositions-->
<button class="prismea-button -outlined -alert  -pill -inverse-on-hover">Alert outlined pill inverses on hover
</button>
<button class="prismea-button -short -negative  -pill">Pill short negative
</button>
<button class="prismea-button -outlined -short -wide -warning  -inverse-on-hover">Wide short warn ol inv
</button>
<button class="prismea-button -outlined -short -positive  -pill">Positive ol short pill
</button>
<button class="prismea-button -outlined -icon -special  -inverse-on-hover"><i class="prismea-glyph-12_search"></i>
</button>
<button class="prismea-button -outlined -short -neutral  -pill -icon-text"><i class="prismea-icon prismea-glyph-24_transfer"></i><span>Pill outlined sm</span>
</button>
<button class="prismea-button -short -neutral  -pill -icon-text"><i class="prismea-icon prismea-glyph-16_add -x2"></i><span>Pill sm with size x2 icon</span>
</button>
button.prismea-button.
  Button
  
//  Styles
button.prismea-button.-link.
  Link
  
button.prismea-button.-link.-color-positive.
  Link with color
  
button.prismea-button.-outlined.
  Outlined
  
button.prismea-button.-outlined(disabled).
  Outlined disabled
  
button.prismea-button.-outlined.-inverse-on-hover.
  Outlined inverses on hover
  
//  States
button.prismea-button.-pending.
  Pending
  
button.prismea-button(disabled).
  Disabled
  
button.prismea-button.-icon
  i.prismea-glyph-12_search
button.prismea-button.-icon-text
  i.prismea-icon.prismea-glyph-12_search
  span Button with text and icon
//  Shapes and sizes
button.prismea-button.-short.
  Short
  
button.prismea-button.-wide.
  Wide button (250px)
  
button.prismea-button.-short.-wide.
  Wide short button
  
button.prismea-button.-pill.
  Pill with radius 20px
  
button.prismea-button.-short.-pill.
  Pill short
  
button.prismea-button.-wide.-pill.
  Pill wide
  
button.prismea-button.-short.-wide.-pill.
  Pill wide short
  
button.prismea-button.-block.
  Block
  
//  Themes
button.prismea-button.-light.
  Light
  
button.prismea-button.-alert.
  Alert
  
button.prismea-button.-positive.
  Positive
  
button.prismea-button.-negative.
  Negative
  
button.prismea-button.-warning.
  Warning
  
button.prismea-button.-special.
  Special
  
button.prismea-button.-faded.
  Faded
  
button.prismea-button.-neutral.
  Neutral
  
button.prismea-button.-alert-light.
  Alert light
  
button.prismea-button.-alert-dark.
  Alert dark
  
button.prismea-button.-alert-darker.
  Alert darker
  
//  Compositions
button.prismea-button.-outlined.-alert.-pill.-inverse-on-hover.
  Alert outlined pill inverses on hover
  
button.prismea-button.-short.-negative.-pill.
  Pill short negative
  
button.prismea-button.-outlined.-short.-wide.-warning.-inverse-on-hover.
  Wide short warn ol inv
  
button.prismea-button.-outlined.-short.-positive.-pill.
  Positive ol short pill
  
button.prismea-button.-outlined.-icon.-special.-inverse-on-hover
  i.prismea-glyph-12_search
button.prismea-button.-outlined.-short.-neutral.-pill.-icon-text
  i.prismea-icon.prismea-glyph-24_transfer
  span Pill outlined sm
button.prismea-button.-short.-neutral.-pill.-icon-text
  i.prismea-icon.prismea-glyph-16_add.-x2
  span Pill sm with size x2 icon

Color

<span class="prismea-color -color-classic">Classic</span><span class="prismea-color -color-classic-light">Classic Light</span><span class="prismea-color -color-positive">Positive</span><span class="prismea-color -color-negative">Negative</span><span class="prismea-color -color-neutral">Neutral</span><span class="prismea-color -color-neutral-light">Neutral Light</span><span class="prismea-color -color-alert">Alert</span><span class="prismea-color -color-alert-dark">Alert Dark</span><span class="prismea-color -color-warning">Warning</span><span class="prismea-color -color-faded-dark">Faded Dark</span><span class="prismea-color -color-faded">Faded</span><span class="prismea-color -color-faded-light">Faded Light</span><span class="prismea-color -color-light">Light</span><span class="prismea-color -color-special">Special</span><span class="prismea-color -color-pending">Pending</span><span class="prismea-color -color-black">Black</span>
span.prismea-color.-color-classic Classic
span.prismea-color.-color-classic-light Classic Light
span.prismea-color.-color-positive Positive
span.prismea-color.-color-negative Negative
span.prismea-color.-color-neutral Neutral
span.prismea-color.-color-neutral-light Neutral Light
span.prismea-color.-color-alert Alert
span.prismea-color.-color-alert-dark Alert Dark
span.prismea-color.-color-warning Warning
span.prismea-color.-color-faded-dark Faded Dark
span.prismea-color.-color-faded Faded
span.prismea-color.-color-faded-light Faded Light
span.prismea-color.-color-light Light
span.prismea-color.-color-special Special
span.prismea-color.-color-pending Pending
span.prismea-color.-color-black Black

Contextual button

<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
button.prismea-contextual-button
  i.prismea-contextual-button--icon.prismea-glyph-16_document
button.prismea-contextual-button.-faded
  i.prismea-contextual-button--icon.prismea-glyph-16_document
button.prismea-contextual-button.-invisible
  i.prismea-contextual-button--icon.prismea-glyph-16_document

Drawing

<img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')

Icon

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

<i class="prismea-icon prismea-glyph-50-logo"></i><i class="prismea-icon -x2 prismea-glyph-50-logo"></i><i class="prismea-icon -x3 prismea-glyph-50-logo"></i><i class="prismea-icon -x4 prismea-glyph-50-logo"></i><i class="prismea-icon prismea-glyph-50-logo -color-classic"></i><i class="prismea-icon -x1 prismea-glyph-24_dashboard -color-light -circle -classic"></i><i class="prismea-icon -x2 prismea-glyph-24_incoming-transfer -circle -neutral"></i><i class="prismea-icon -x3 prismea-glyph-50-logo -circle -alert-light"></i><i class="prismea-icon -x4 prismea-glyph-50-logo -circle -warning"></i>
i.prismea-icon.prismea-glyph-50-logo
i.prismea-icon.-x2.prismea-glyph-50-logo
i.prismea-icon.-x3.prismea-glyph-50-logo
i.prismea-icon.-x4.prismea-glyph-50-logo
i.prismea-icon.prismea-glyph-50-logo.-color-classic
i.prismea-icon.-x1.prismea-glyph-24_dashboard.-color-light.-circle.-classic
i.prismea-icon.-x2.prismea-glyph-24_incoming-transfer.-circle.-neutral
i.prismea-icon.-x3.prismea-glyph-50-logo.-circle.-alert-light
i.prismea-icon.-x4.prismea-glyph-50-logo.-circle.-warning

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"><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"><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
  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
  i.prismea-icon-button--icon.prismea-glyph-16_admin

Input

Autocomplete

Renders an autocomplete.

<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -sm">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -sm" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -md">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -md" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-autocomplete">
  <div class="prismea-autocomplete--field -md -open">
    <div class="prismea-autocomplete--input">
      <input class="prismea-input-text -md -open" placeholder="Mighty text"/>
      <div class="prismea-autocomplete--caret"><i class="prismea-glyph-12_caret-down"></i></div>
    </div>
    <ul class="prismea-autocomplete--options">
      <li class="prismea-autocomplete--option">-- Select an option --</li>
      <li class="prismea-autocomplete--option -autocompleted">Selected Option</li>
      <li class="prismea-autocomplete--option -disabled">Disabled Option</li>
      <li class="prismea-autocomplete--option">Third</li>
    </ul>
  </div>
</div>
.prismea-autocomplete
  .prismea-autocomplete--field.-sm
    .prismea-autocomplete--input
      input.prismea-input-text.-sm(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third
.prismea-autocomplete
  .prismea-autocomplete--field.-md
    .prismea-autocomplete--input
      input.prismea-input-text.-md(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third
.prismea-autocomplete
  .prismea-autocomplete--field.-md.-open
    .prismea-autocomplete--input
      input.prismea-input-text.-md.-open(placeholder='Mighty text')
      .prismea-autocomplete--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-autocomplete--options
      li.prismea-autocomplete--option -- Select an option --
      li.prismea-autocomplete--option.-autocompleted Selected Option
      li.prismea-autocomplete--option.-disabled Disabled Option
      li.prismea-autocomplete--option Third

Input text

<input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -sm  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md  " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md -error " type="text" placeholder="Mighty text"/>
<input class="prismea-input-text -md  -disabled" type="text" placeholder="Disabled" disabled="disabled"/>
<input class="prismea-input-text -secondary  " type="search" placeholder="Search"/>
input.prismea-input-text(type='text', placeholder='Mighty text')
input.prismea-input-text.-sm(type='text', placeholder='Mighty text')
input.prismea-input-text.-md(type='text', placeholder='Mighty text')
input.prismea-input-text.-md.-error(type='text', placeholder='Mighty text')
input.prismea-input-text.-md.-disabled(type='text', placeholder='Disabled', disabled)
input.prismea-input-text.-secondary(type='search', placeholder='Search')

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-12_cross"></i></strong></span><span class="prismea-input-file--button">Choose a file</span></label>
  <input id="prismea-input-file" type="file"/>
</div>
<div class="prismea-input-file">
  <label class="prismea-input-file--wrapper" for="prismea-input-file"><span class="prismea-input-file--container -error"><span>Import document (jpg, pdf, png, doc) - 2mo max.</span><strong class="prismea-input-file--reset"><i class="prismea-glyph-12_cross"></i></strong></span><span class="prismea-input-file--button">Choose a file</span></label>
  <input id="prismea-input-file" type="file"/>
</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-12_cross
    span.prismea-input-file--button Choose a file
  input#prismea-input-file(type='file')
.prismea-input-file
  label.prismea-input-file--wrapper(for='prismea-input-file')
    span.prismea-input-file--container.-error
      span Import document (jpg, pdf, png, doc) - 2mo max.
      strong.prismea-input-file--reset
        i.prismea-glyph-12_cross
    span.prismea-input-file--button Choose a file
  input#prismea-input-file(type='file')

Input Info

<div class="prismea-input-info">
  <p class="prismea-text">Kristin Orthega</p>
  <p class="prismea-text -text-sm">FR 76 XXXX XXXX XXXX 66</p>
</div>
.prismea-input-info
  p.prismea-text Kristin Orthega
  p.prismea-text.-text-sm FR 76 XXXX XXXX XXXX 66

Select

Renders a selector.
Options:

  • -multiple : multiple choices selector
<div class="prismea-select">
  <div class="prismea-select--field -sm">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></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">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -md">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></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">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
<div class="prismea-select -multiple">
  <select class="prismea-select--field -md" size="6" multiple="multiple">
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Fifth</option>
    <option>Last</option>
  </select>
</div>
<div class="prismea-select">
  <div class="prismea-select--field -md -open">
    <div class="prismea-select--input">
      <div class="prismea-select--label"><span>Selected option</span></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">-- Select an option --</li>
      <li class="prismea-select--option -selected">Selected Option</li>
      <li class="prismea-select--option -disabled">Disabled Option</li>
      <li class="prismea-select--option">Third</li>
    </ul>
  </div>
</div>
.prismea-select
  .prismea-select--field.-sm
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third
.prismea-select
  .prismea-select--field.-md
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third
.prismea-select.-multiple
  select.prismea-select--field.-md(size='6', multiple)
    option First
    option Second
    option Third
    option Fourth
    option Fifth
    option Last
.prismea-select
  .prismea-select--field.-md.-open
    .prismea-select--input
      .prismea-select--label
        span Selected option
      .prismea-select--caret
        i.prismea-glyph-12_caret-down
    ul.prismea-select--options
      li.prismea-select--option -- Select an option --
      li.prismea-select--option.-selected Selected Option
      li.prismea-select--option.-disabled Disabled Option
      li.prismea-select--option Third

Textarea

<textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
<textarea class="prismea-textarea -sm" placeholder="Textarea" rows="4"></textarea>
<textarea class="prismea-textarea -md" placeholder="Textarea" rows="4"></textarea>
textarea.prismea-textarea(placeholder='Textarea', rows='4')
textarea.prismea-textarea.-sm(placeholder='Textarea', rows='4')
textarea.prismea-textarea.-md(placeholder='Textarea', rows='4')

Image

Customizable size options as included in the q-fixed-widths mixin

<img class="prismea-image -width-30" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image -width-50" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/><img class="prismea-image -width-100" src="https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg"/>
img.prismea-image.-width-30(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image.-width-50(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')
img.prismea-image.-width-100(src='https://lh4.googleusercontent.com/-1e23vo7yl7c/AAAAAAAAAAI/AAAAAAAAAAA/O-6HMPf4T4s/s88-p-k-no-ns-nd/photo.jpg')

Label

<label class="prismea-label">Label</label>
label.prismea-label Label

Line

<hr class="prismea-line"/>
<hr class="prismea-line -neutral"/>
hr.prismea-line
hr.prismea-line.-neutral

You can use -hoverable variant to not show the underline on focus and when a ion--hoverable parent is hovered.

<a class="prismea-link" href="#">Link</a><a class="prismea-link -text-sm" href="#">Link</a><a class="prismea-link -text-xl" href="#">Link</a><a class="prismea-link -secondary" href="#">Link</a><a class="prismea-link -hoverable" href="#">Link</a>
a.prismea-link(href='#') Link
a.prismea-link.-text-sm(href='#') Link
a.prismea-link.-text-xl(href='#') Link
a.prismea-link.-secondary(href='#') Link
a.prismea-link.-hoverable(href='#') Link

Loader

<svg class="prismea-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 30">
  <path fill="none" stroke="#000" stroke-width="2.5" d="M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30"></path>
  <path fill="none" stroke="#000" stroke-width="2.5" d="M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5"></path>
</svg>
svg.prismea-loader(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 23 30')
  path(fill='none', stroke='#000', stroke-width='2.5', d='M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30')
  path(fill='none', stroke='#000', stroke-width='2.5', d='M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5')

Numeral

To use with numerals like number, unique identifier like IBAN, Phone number, Price …

<span class="prismea-numeral">+33 8 36 65 65 65</span>
span.prismea-numeral +33 8 36 65 65 65

Pre code

<pre class="prismea-pre-code language-json"><code>{
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    <span>"Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"</span>
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}</code></pre>
pre.prismea-pre-code.language-json
  code
    | {
  "accept": [
    "application/json, text/plain, */*"
  ],
  "accept-encoding": [
    "gzip, deflate, br"
  ],
  "accept-language": [
    "en-US,en;q=0.9,fr-FR;q=0.8,fr;q=0.7"
  ],
  "User-Agent": [
    
    span "Prismea Dev/1.2.0 (com.prismea-dev.ios; build:1180; iOS 13.7.0) Alamofire/5.2.2"
    | 
  ]
  "cookie": [
    "XXX"
  ],
  "dnt": [
    "1"
  ],
}

Spot

<a class="prismea-spot" href="#" title="Title"><i class="prismea-glyph-account"></i></a><a class="prismea-spot -selected" href="#" title="Title"><i class="prismea-glyph-account"></i></a>
a.prismea-spot(href='#', title='Title')
  i.prismea-glyph-account
a.prismea-spot.-selected(href='#', title='Title')
  i.prismea-glyph-account

Switch

<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch" disabled="disabled"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on -pending " role="switch" aria-checked="true" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -on -with-label" role="switch" aria-checked="true" aria-label="Switch"><span class="prismea-switch--label -color-light">On</span><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">No</span><i class="prismea-switch--button"></i>
</button>
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
  i.prismea-switch--button
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch', disabled)
  i.prismea-switch--button
button.prismea-switch.-on.-pending(role='switch', aria-checked='true', aria-label='Switch', title='Pending …')
  i.prismea-switch--button
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
  i.prismea-switch--button
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
  i.prismea-switch--button
button.prismea-switch.-on.-with-label(role='switch', aria-checked='true', aria-label='Switch')
  span.prismea-switch--label.-color-light On
  i.prismea-switch--button
button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
  span.prismea-switch--label.-color-light No
  i.prismea-switch--button

Tab

<a class="prismea-tab" href="#">Some tab</a><a class="prismea-tab -selected" href="#">Some tab</a>
a.prismea-tab(href='#') Some tab
a.prismea-tab.-selected(href='#') Some tab

Title

Title 1

<!-- Standard-->
<h1 class="prismea-title-1">Title 1</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-1 -capitalize">title 1 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-1 -uppercase">Title 1 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-1 -center">Title 1 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-1 -center -capitalize">Title 1 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-1 -center -uppercase">Title 1 center aligned uppercased</h1>
//  Standard
h1.prismea-title-1 Title 1
//  Standard (capitalize)
h1.prismea-title-1.-capitalize title 1 capitalized
//  Standard (uppercase)
h1.prismea-title-1.-uppercase Title 1 uppercased
//  Center aligned
h1.prismea-title-1.-center Title 1 center aligned
//  Center aligned (capitalize)
h1.prismea-title-1.-center.-capitalize Title 1 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-1.-center.-uppercase Title 1 center aligned uppercased

Title 2

<!-- Standard-->
<h1 class="prismea-title-2">Title 2</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-2 -capitalize">title 2 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-2 -uppercase">Title 2 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-2 -center">Title 2 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-2 -center -capitalize">Title 2 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-2 -center -uppercase">Title 2 center aligned uppercased</h1>
//  Standard
h1.prismea-title-2 Title 2
//  Standard (capitalize)
h1.prismea-title-2.-capitalize title 2 capitalized
//  Standard (uppercase)
h1.prismea-title-2.-uppercase Title 2 uppercased
//  Center aligned
h1.prismea-title-2.-center Title 2 center aligned
//  Center aligned (capitalize)
h1.prismea-title-2.-center.-capitalize Title 2 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-2.-center.-uppercase Title 2 center aligned uppercased

Title 3

<!-- Standard-->
<h1 class="prismea-title-3">Title 3</h1>
<!-- Standard (capitalize)-->
<h1 class="prismea-title-3 -capitalize">Title 3 capitalized</h1>
<!-- Standard (uppercase)-->
<h1 class="prismea-title-3 -uppercase">Title 3 uppercased</h1>
<!-- Center aligned-->
<h1 class="prismea-title-3 -center">Title 3 center aligned</h1>
<!-- Center aligned (capitalize)-->
<h1 class="prismea-title-3 -center -capitalize">Title 3 center aligned capitalized</h1>
<!-- Center aligned (uppercase)-->
<h1 class="prismea-title-3 -center -uppercase">Title 3 center aligned uppercased</h1>
//  Standard
h1.prismea-title-3 Title 3
//  Standard (capitalize)
h1.prismea-title-3.-capitalize Title 3 capitalized
//  Standard (uppercase)
h1.prismea-title-3.-uppercase Title 3 uppercased
//  Center aligned
h1.prismea-title-3.-center Title 3 center aligned
//  Center aligned (capitalize)
h1.prismea-title-3.-center.-capitalize Title 3 center aligned capitalized
//  Center aligned (uppercase)
h1.prismea-title-3.-center.-uppercase Title 3 center aligned uppercased

Text

You can use the following variants:

  • Alignment: -left, -right, -center
  • Size: -text-sm, -text-md, -text-xl
  • Weight: -text-lighter, -text-normal, -text-bold, -text-bolder
  • Word break: -break-text
  • Decoration: -line-through
  • Transforms: -uppercase, -capitalize

To make line return visible, you can use -text-multiline

<p class="prismea-text">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.

</p>
<p class="prismea-text -center">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.

</p>
<p class="prismea-text -text-multiline">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.

</p>
<p class="prismea-text -line-through">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.

</p>
<p class="prismea-text -capitalize">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.

</p>
<p class="prismea-text -uppercase">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.

</p>
<p class="prismea-text -break-text">http://chart.apis.google.com/chartchs=500x500&chma=0,0,100,100&cht=p&chco=FF0000%2CFFFF00%7CFF8000%2C00FF00%7C00FF00%2C0000FF&chd=t%3A122%2C42%2C17%2C10%2C8%2C7%2C7%2C7%2C7%2C6%2C6%2C6%2C6%2C5%2C5&chl=122%7C42%7C17%7C10%7C8%7C7%7C7%7C7%7C7%7C6%7C6%7C6%7C6%7C5%7C5&chdl=android%7Cjava%7Cstack-trace%7Cbroadcastreceiver%7Candroid-ndk%7Cuser-agent%7Candroid-webview%7Cwebview%7Cbackground%7Cmultithreading%7Candroid-source%7Csms%7Cadb%7Csollections%7Cactivity|Chart
</p>
p.prismea-text.
  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.
  
p.prismea-text.-center.
  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.
  
p.prismea-text.-text-multiline.
  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.
  
p.prismea-text.-line-through.
  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.
  
p.prismea-text.-capitalize.
  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.
  
p.prismea-text.-uppercase.
  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.
  
p.prismea-text.-break-text.
  http://chart.apis.google.com/chartchs=500x500&chma=0,0,100,100&cht=p&chco=FF0000%2CFFFF00%7CFF8000%2C00FF00%7C00FF00%2C0000FF&chd=t%3A122%2C42%2C17%2C10%2C8%2C7%2C7%2C7%2C7%2C6%2C6%2C6%2C6%2C5%2C5&chl=122%7C42%7C17%7C10%7C8%7C7%7C7%7C7%7C7%7C6%7C6%7C6%7C6%7C5%7C5&chdl=android%7Cjava%7Cstack-trace%7Cbroadcastreceiver%7Candroid-ndk%7Cuser-agent%7Candroid-webview%7Cwebview%7Cbackground%7Cmultithreading%7Candroid-source%7Csms%7Cadb%7Csollections%7Cactivity|Chart
  

Tooltip

Used as an additional information when hovering a button per instance

You must use one of the following variants:

  • Position: -left, -right
<div class="prismea-vertical-spacing-20">
  <div class="prismea-vertical-spacing-20--slot -center">
    <div class="-has-tooltip" style="width: 200px; height: 20px; background-color: blue; margin: 0 auto;">
      <div class="prismea-tooltip -left" style="opacity:1;">I am on the left</div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot -center">
    <div class="-has-tooltip" style="width: 200px; height: 20px; background-color: yellow; margin: 0 auto;">
      <div class="prismea-tooltip -right" style="opacity:1;">I am on the right</div>
    </div>
  </div>
</div>
.prismea-vertical-spacing-20
  .prismea-vertical-spacing-20--slot.-center
    .-has-tooltip(style='width: 200px; height: 20px; background-color: blue; margin: 0 auto;')
      .prismea-tooltip.-left(style='opacity:1;') I am on the left
  .prismea-vertical-spacing-20--slot.-center
    .-has-tooltip(style='width: 200px; height: 20px; background-color: yellow; margin: 0 auto;')
      .prismea-tooltip.-right(style='opacity:1;') I am on the right