Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost

Article

<article class="prismea-article">
  <div class="prismea-article--slot">
    <h1 class="prismea-title-1 -center">Article</h1>
  </div>
  <div class="prismea-article--slot">
    <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>
  </div>
</article>
article.prismea-article
  .prismea-article--slot
    h1.prismea-title-1.-center Article
  .prismea-article--slot
    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.

Body message

Used as centered message.

<div class="prismea-body-message -absolute">
  <div class="prismea-body-message--box">
    <div class="prismea-vertical-spacing-30 -center">
      <div class="prismea-vertical-spacing-30--slot"><i class="prismea-icon -x4 prismea-glyph-24_hand-stop"></i>
      </div>
      <div class="prismea-vertical-spacing-30--slot">
        <h1 class="prismea-title-1">Dashboard example message title</h1>
      </div>
      <div class="prismea-vertical-spacing-30--slot">
        <p class="prismea-text"><a class="prismea-link" href="#">Link to somewhere</a></p>
      </div>
    </div>
  </div>
</div>
.prismea-body-message.-absolute
  .prismea-body-message--box
    .prismea-vertical-spacing-30.-center
      .prismea-vertical-spacing-30--slot
        i.prismea-icon.-x4.prismea-glyph-24_hand-stop
      .prismea-vertical-spacing-30--slot
        h1.prismea-title-1 Dashboard example message title
      .prismea-vertical-spacing-30--slot
        p.prismea-text
          a.prismea-link(href='#') Link to somewhere

Global message

Used in email validation confirmation.

<div class="prismea-global-message -fixed">
  <div class="prismea-global-message--box">
    <div class="prismea-illustrated-article">
      <div class="prismea-illustrated-article--illustration"><img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
      </div>
      <div class="prismea-illustrated-article--article">
        <article class="prismea-article">
          <div class="prismea-article--slot">
                    <h1 class="prismea-title-1 -center">Article</h1>
          </div>
          <div class="prismea-article--slot">
                    <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>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>
.prismea-global-message.-fixed
  .prismea-global-message--box
    .prismea-illustrated-article
      .prismea-illustrated-article--illustration
        img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')
      .prismea-illustrated-article--article
        article.prismea-article
          .prismea-article--slot
            h1.prismea-title-1.-center Article
          .prismea-article--slot
            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.
              
<div class="prismea-header">
  <div class="prismea-header--slot -search-bar">
    <div class="prismea-input-group ion--unfocus ion--sm">
      <div class="prismea-input-group--slot -expand ion--slot-left">
        <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
      </div>
      <div class="prismea-input-group--slot ion--slot-right">
        <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="prismea-header--slot">
    <div class="prismea-contextual-profile-menu">
      <div class="prismea-contextual-menu ion--open">
        <div class="prismea-contextual-menu--button">
          <div class="prismea-contextual-profile-menu--card">
            <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><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
              <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
            </div>
          </div>
        </div>
        <ul class="prismea-contextual-menu--menu">
          <li>
            <button class="prismea-contextual-menu--item">First</button>
          </li>
          <li>
            <button class="prismea-contextual-menu--item">Second</button>
          </li>
          <li>
            <button class="prismea-contextual-menu--item">Third</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
.prismea-header
  .prismea-header--slot.-search-bar
    .prismea-input-group.ion--unfocus.ion--sm
      .prismea-input-group--slot.-expand.ion--slot-left
        input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
      .prismea-input-group--slot.ion--slot-right
        button.prismea-button.-icon
          i.prismea-glyph-12_search
  .prismea-header--slot
    .prismea-contextual-profile-menu
      .prismea-contextual-menu.ion--open
        .prismea-contextual-menu--button
          .prismea-contextual-profile-menu--card
            div
              .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')
              span.prismea-contextual-profile-menu--username Miles Morales
              .prismea-contextual-profile-menu--caret
                i.prismea-glyph-12_caret-down
        ul.prismea-contextual-menu--menu
          li
            button.prismea-contextual-menu--item First
          li
            button.prismea-contextual-menu--item Second
          li
            button.prismea-contextual-menu--item Third

Horizontal spacing

<div class="prismea-horizontal-spacing-15">
  <div class="prismea-horizontal-spacing-15--slot">First <br/> multiline</div>
  <div class="prismea-horizontal-spacing-15--slot">Second</div>
  <div class="prismea-horizontal-spacing-15--slot">Third</div>
</div>
<div class="prismea-horizontal-spacing-20">
  <div class="prismea-horizontal-spacing-20--slot">First <br/> multiline</div>
  <div class="prismea-horizontal-spacing-20--slot">Second</div>
  <div class="prismea-horizontal-spacing-20--slot">Third</div>
</div>
<div class="prismea-horizontal-spacing-30">
  <div class="prismea-horizontal-spacing-30--slot">First <br/> multiline</div>
  <div class="prismea-horizontal-spacing-30--slot">Second</div>
  <div class="prismea-horizontal-spacing-30--slot">Third</div>
</div>
<!-- Expand middle aligned-->
<div class="prismea-horizontal-spacing-20 -middle">
  <div class="prismea-horizontal-spacing-20--slot -expand">First <br/> multiline</div>
  <div class="prismea-horizontal-spacing-20--slot">Second</div>
  <div class="prismea-horizontal-spacing-20--slot">Third</div>
</div>
.prismea-horizontal-spacing-15
  .prismea-horizontal-spacing-15--slot
    | First
    br
    | multiline
  .prismea-horizontal-spacing-15--slot Second
  .prismea-horizontal-spacing-15--slot Third
.prismea-horizontal-spacing-20
  .prismea-horizontal-spacing-20--slot
    | First
    br
    | multiline
  .prismea-horizontal-spacing-20--slot Second
  .prismea-horizontal-spacing-20--slot Third
.prismea-horizontal-spacing-30
  .prismea-horizontal-spacing-30--slot
    | First
    br
    | multiline
  .prismea-horizontal-spacing-30--slot Second
  .prismea-horizontal-spacing-30--slot Third
//  Expand middle aligned
.prismea-horizontal-spacing-20.-middle
  .prismea-horizontal-spacing-20--slot.-expand
    | First
    br
    | multiline
  .prismea-horizontal-spacing-20--slot Second
  .prismea-horizontal-spacing-20--slot Third

Illustrated article

<div class="prismea-illustrated-article">
  <div class="prismea-illustrated-article--illustration"><img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
  </div>
  <div class="prismea-illustrated-article--article">
    <article class="prismea-article">
      <div class="prismea-article--slot">
            <h1 class="prismea-title-1 -center">Article</h1>
      </div>
      <div class="prismea-article--slot">
            <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>
      </div>
    </article>
  </div>
</div>
.prismea-illustrated-article
  .prismea-illustrated-article--illustration
    img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')
  .prismea-illustrated-article--article
    article.prismea-article
      .prismea-article--slot
        h1.prismea-title-1.-center Article
      .prismea-article--slot
        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.
          
<div class="prismea-modal">
  <div class="prismea-modal--header">
    <div class="prismea-modal--header--slot">
      <h1 class="prismea-title-2">Modal title</h1>
    </div>
    <div class="prismea-modal--header--slot -close"><i class="prismea-glyph-12_cross"></i></div>
  </div>
  <hr class="prismea-line"/>
  <div class="prismea-modal--body">
    <div class="prismea-vertical-spacing-30">
      <div class="prismea-vertical-spacing-30--slot">
        <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>
      </div>
      <div class="prismea-vertical-spacing-30--slot">
        <div class="prismea-field">
          <div class="prismea-field--slot">
            <label class="prismea-label">Label</label>
          </div>
          <div class="prismea-field--slot">
            <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-30--slot">
        <div class="prismea-field">
          <div class="prismea-field--slot">
            <label class="prismea-label">Label</label>
          </div>
          <div class="prismea-field--slot">
            <textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-modal--footer">
    <div class="prismea-modal--footer--slot">
      <button class="prismea-button -link ">Button
      </button>
    </div>
    <div class="prismea-modal--footer--slot">
      <button class="prismea-button">Button
      </button>
    </div>
  </div>
</div>
.prismea-modal
  .prismea-modal--header
    .prismea-modal--header--slot
      h1.prismea-title-2 Modal title
    .prismea-modal--header--slot.-close
      i.prismea-glyph-12_cross
  hr.prismea-line
  .prismea-modal--body
    .prismea-vertical-spacing-30
      .prismea-vertical-spacing-30--slot
        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.
          
      .prismea-vertical-spacing-30--slot
        .prismea-field
          .prismea-field--slot
            label.prismea-label Label
          .prismea-field--slot
            input.prismea-input-text(type='text', placeholder='Mighty text')
      .prismea-vertical-spacing-30--slot
        .prismea-field
          .prismea-field--slot
            label.prismea-label Label
          .prismea-field--slot
            textarea.prismea-textarea(placeholder='Textarea', rows='4')
  .prismea-modal--footer
    .prismea-modal--footer--slot
      button.prismea-button.-link.
        Button
        
    .prismea-modal--footer--slot
      button.prismea-button.
        Button

Modal (small)

<div class="prismea-modal-small">
  <div class="prismea-modal-small--header">
    <div class="prismea-modal-small--header--slot">
      <h1 class="prismea-title-2">Modal title</h1>
    </div>
  </div>
  <div class="prismea-modal-small--body">
    <div class="prismea-vertical-spacing-30">
      <div class="prismea-vertical-spacing-30--slot">
        <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>
      </div>
    </div>
  </div>
  <div class="prismea-modal-small--footer">
    <div class="prismea-modal-small--footer--line">
      <div class="prismea-modal-small--footer--slot">
        <button class="prismea-button">Confirm
        </button>
      </div>
      <div class="prismea-modal-small--footer--slot">
        <button class="prismea-button">Delete
        </button>
      </div>
    </div>
    <div class="prismea-modal-small--footer--line">
      <button class="prismea-button -link ">Abort
      </button>
    </div>
  </div>
  <div class="prismea-modal-small--icon -bg-alert"><i class="prismea-icon prismea-glyph-40_delete"></i>
  </div>
</div>
.prismea-modal-small
  .prismea-modal-small--header
    .prismea-modal-small--header--slot
      h1.prismea-title-2 Modal title
  .prismea-modal-small--body
    .prismea-vertical-spacing-30
      .prismea-vertical-spacing-30--slot
        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.
          
  .prismea-modal-small--footer
    .prismea-modal-small--footer--line
      .prismea-modal-small--footer--slot
        button.prismea-button.
          Confirm
          
      .prismea-modal-small--footer--slot
        button.prismea-button.
          Delete
          
    .prismea-modal-small--footer--line
      button.prismea-button.-link.
        Abort
        
  .prismea-modal-small--icon.-bg-alert
    i.prismea-icon.prismea-glyph-40_delete

Table grid

<table class="prismea-table-grid -grid-30">
  <tbody>
    <tr class="prismea-table-grid--line">
      <td class="prismea-table-grid--cell" colspan="3">
        <div class="prismea-text -text-sm -text-bold">One</div>
        <div class="prismea-numeral prismea-color -color-faded">One</div>
      </td>
    </tr>
    <tr class="prismea-table-grid--line">
      <td class="prismea-table-grid--cell" colspan="3">
        <div class="prismea-text -text-sm -text-bold">One with a very long sentence (prevents content from coming out of the box)</div>
        <div class="prismea-numeral prismea-color -color-faded">This-is-a-very-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong-sentence</div>
      </td>
    </tr>
    <tr class="prismea-table-grid--line">
      <td class="prismea-table-grid--cell" colspan="3">
        <div class="prismea-text -text-sm -text-bold">Two</div>
        <div class="prismea-numeral prismea-color -color-faded">One</div>
      </td>
    </tr>
    <tr class="prismea-table-grid--line">
      <td class="prismea-table-grid--cell">
        <div class="prismea-text -text-sm -text-bold">Three</div>
        <div class="prismea-numeral prismea-color -color-faded">One</div>
      </td>
      <td class="prismea-table-grid--cell" colspan="2">
        <div class="prismea-text -text-sm -text-bold">Three</div>
        <div class="prismea-numeral prismea-color -color-faded">Two</div>
      </td>
    </tr>
    <tr class="prismea-table-grid--line">
      <td class="prismea-table-grid--cell">
        <div class="prismea-text -text-sm -text-bold">Four</div>
        <div class="prismea-numeral prismea-color -color-faded">One</div>
      </td>
      <td class="prismea-table-grid--cell">
        <div class="prismea-text -text-sm -text-bold">Four</div>
        <div class="prismea-numeral prismea-color -color-faded">Two</div>
      </td>
      <td class="prismea-table-grid--cell">
        <div class="prismea-text -text-sm -text-bold">Four</div>
        <div class="prismea-numeral prismea-color -color-faded">Two</div>
      </td>
    </tr>
  </tbody>
</table>
table.prismea-table-grid.-grid-30
  tbody
    tr.prismea-table-grid--line
      td.prismea-table-grid--cell(colspan='3')
        .prismea-text.-text-sm.-text-bold One
        .prismea-numeral.prismea-color.-color-faded One
    tr.prismea-table-grid--line
      td.prismea-table-grid--cell(colspan='3')
        .prismea-text.-text-sm.-text-bold One with a very long sentence (prevents content from coming out of the box)
        .prismea-numeral.prismea-color.-color-faded This-is-a-very-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong-sentence
    tr.prismea-table-grid--line
      td.prismea-table-grid--cell(colspan='3')
        .prismea-text.-text-sm.-text-bold Two
        .prismea-numeral.prismea-color.-color-faded One
    tr.prismea-table-grid--line
      td.prismea-table-grid--cell
        .prismea-text.-text-sm.-text-bold Three
        .prismea-numeral.prismea-color.-color-faded One
      td.prismea-table-grid--cell(colspan='2')
        .prismea-text.-text-sm.-text-bold Three
        .prismea-numeral.prismea-color.-color-faded Two
    tr.prismea-table-grid--line
      td.prismea-table-grid--cell
        .prismea-text.-text-sm.-text-bold Four
        .prismea-numeral.prismea-color.-color-faded One
      td.prismea-table-grid--cell
        .prismea-text.-text-sm.-text-bold Four
        .prismea-numeral.prismea-color.-color-faded Two
      td.prismea-table-grid--cell
        .prismea-text.-text-sm.-text-bold Four
        .prismea-numeral.prismea-color.-color-faded Two

Toasts

<div class="prismea-toasts">
  <div class="prismea-toasts--slot">
    <div class="prismea-toast -error">
      <div class="prismea-toast--header">
        <div class="prismea-toast--header--title">First</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">A content inside the toast.</div>
    </div>
  </div>
  <div class="prismea-toasts--slot">
    <div class="prismea-toast -error">
      <div class="prismea-toast--header">
        <div class="prismea-toast--header--title">Second</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">A content inside the toast.</div>
    </div>
  </div>
  <div class="prismea-toasts--slot">
    <div class="prismea-toast -error">
      <div class="prismea-toast--header">
        <div class="prismea-toast--header--title">Third</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">A content inside the toast.</div>
    </div>
  </div>
</div>
.prismea-toasts
  .prismea-toasts--slot
    .prismea-toast.-error
      .prismea-toast--header
        .prismea-toast--header--title First
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content A content inside the toast.
  .prismea-toasts--slot
    .prismea-toast.-error
      .prismea-toast--header
        .prismea-toast--header--title Second
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content A content inside the toast.
  .prismea-toasts--slot
    .prismea-toast.-error
      .prismea-toast--header
        .prismea-toast--header--title Third
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content A content inside the toast.

Vertical spacing

Add space between elements (suffix with the size you want).

<div class="prismea-vertical-spacing-5">
  <div class="prismea-vertical-spacing-5--slot">First</div>
  <div class="prismea-vertical-spacing-5--slot">Second</div>
  <div class="prismea-vertical-spacing-5--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-10">
  <div class="prismea-vertical-spacing-10--slot">First</div>
  <div class="prismea-vertical-spacing-10--slot">Second</div>
  <div class="prismea-vertical-spacing-10--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-15">
  <div class="prismea-vertical-spacing-15--slot">First</div>
  <div class="prismea-vertical-spacing-15--slot">Second</div>
  <div class="prismea-vertical-spacing-15--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-20">
  <div class="prismea-vertical-spacing-20--slot">First</div>
  <div class="prismea-vertical-spacing-20--slot">Second</div>
  <div class="prismea-vertical-spacing-20--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-30">
  <div class="prismea-vertical-spacing-30--slot">First</div>
  <div class="prismea-vertical-spacing-30--slot">Second</div>
  <div class="prismea-vertical-spacing-30--slot">Third</div>
</div>
.prismea-vertical-spacing-5
  .prismea-vertical-spacing-5--slot First
  .prismea-vertical-spacing-5--slot Second
  .prismea-vertical-spacing-5--slot Third
.prismea-vertical-spacing-10
  .prismea-vertical-spacing-10--slot First
  .prismea-vertical-spacing-10--slot Second
  .prismea-vertical-spacing-10--slot Third
.prismea-vertical-spacing-15
  .prismea-vertical-spacing-15--slot First
  .prismea-vertical-spacing-15--slot Second
  .prismea-vertical-spacing-15--slot Third
.prismea-vertical-spacing-20
  .prismea-vertical-spacing-20--slot First
  .prismea-vertical-spacing-20--slot Second
  .prismea-vertical-spacing-20--slot Third
.prismea-vertical-spacing-30
  .prismea-vertical-spacing-30--slot First
  .prismea-vertical-spacing-30--slot Second
  .prismea-vertical-spacing-30--slot Third

Design System

Renders an interactive component for discoverable content.

The dropdown component is a container for a dropdown button and a dropdown content.

  • dropdown : the main container
    • dropdown__trigger : the container for a button
    • dropdown__popover : the toggable content, hidden by default
      • dropdown__content : the dropdown card with a white background
      • dropdown__arrow : an arrow centered to the trigger, this element is optional

Modifiers:

  • dropdown--active : the popover will show up
  • dropdown--center : the popover will be centered with the trigger
  • dropdown--right : the popover will right-aligned with the trigger

The dropdown component can be combined with the menu component to create dropdown menus.

The dropdown__chevron class can be added to any element inside dropdown__trigger. This element (preferably a chevron down) rotates by 180deg when the popover is visible.

<div class="flex flex-justify-space-between py-8 px-10">
  <div>
    <div class="dropdown dropdown--active">
      <div class="dropdown__trigger">
        <a class="btn btn--xs btn--primary btn--responsive">Click me to toggle</a>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__content">
          <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="dropdown dropdown--active">
      <div class="dropdown__trigger">
        <a class="btn btn--xs btn--primary btn--responsive">Click me to toggle</a>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
    <div class="pa-4 prismea-text -text-md -text-nowrap">Popover with an arrow</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="dropdown dropdown--right dropdown--active">
      <div class="dropdown__trigger">
    <a class="btn btn--xs btn--primary btn--responsive">Click me to toggle</a>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
    <div class="pa-4 prismea-text -text-md -text-nowrap">Popover aligned to right</div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="dropdown dropdown--center dropdown--active">
      <div class="dropdown__trigger">
    <a class="btn btn--xs btn--primary btn--responsive">Click me to toggle</a>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
    <div class="pa-4 prismea-text -text-md -text-nowrap">Popover centered</div>
        </div>
      </div>
    </div>
  </div>
</div>
.flex.flex-justify-space-between.py-8.px-10
  div
    .dropdown.dropdown--active
      .dropdown__trigger
        a.btn.btn--xs.btn--primary.btn--responsive Click me to toggle
      .dropdown__popover
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
  div
    .dropdown.dropdown--active
      .dropdown__trigger
        a.btn.btn--xs.btn--primary.btn--responsive Click me to toggle
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap Popover with an arrow
  div
    .dropdown.dropdown--right.dropdown--active
      .dropdown__trigger
        a.btn.btn--xs.btn--primary.btn--responsive Click me to toggle
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap Popover aligned to right
  div
    .dropdown.dropdown--center.dropdown--active
      .dropdown__trigger
        a.btn.btn--xs.btn--primary.btn--responsive Click me to toggle
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap Popover centered

Link to Figma

Classic search bar with a stacked button

<div class="flex flex-justify-space-between">
  <div class="ma-3 w-full">
    <form class="search-bar">
      <div class="search-bar__input flex">
        <svg class="icon-32 color-grey--400 mr-2">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input class="input text" placeholder="Default state"/>
      </div>
      <button class="btn btn--primary search-bar__button">Button</button>
      <div class="search-bar__dropdown pa-2">
        <div class="pa-16 flex flex-justify-center text-label color-grey--400">No result found</div>
        <button class="btn btn--primary w-full">Button</button>
      </div>
    </form>
  </div>
  <div class="ma-3 w-full">
    <form class="search-bar">
      <div class="search-bar__input flex search-bar__input--active">
        <svg class="icon-32 color-grey--400 mr-2">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input class="input text" placeholder="Active state"/>
      </div>
      <button class="btn btn--primary search-bar__button">Button</button>
      <div class="search-bar__dropdown pa-2">
        <div class="pa-16 flex flex-justify-center text-label color-grey--400">No result found</div>
        <button class="btn btn--primary w-full">Button</button>
      </div>
    </form>
  </div>
</div>
<div class="flex flex-justify-space-between">
  <div class="ma-3 w-full">
    <form class="search-bar search-bar--open">
      <div class="search-bar__input flex">
        <svg class="icon-32 color-grey--400 mr-2">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input class="input text" placeholder="Open list (no result)"/>
      </div>
      <button class="btn btn--primary search-bar__button">Button</button>
      <div class="search-bar__dropdown pa-2">
        <div class="pa-16 flex flex-justify-center text-label color-grey--400">No result found</div>
        <button class="btn btn--primary w-full">Button</button>
      </div>
    </form>
  </div>
  <div class="ma-3 w-full">
    <form class="search-bar search-bar--open">
      <div class="search-bar__input flex">
        <svg class="icon-32 color-grey--400 mr-2">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input class="input text" placeholder="Open list (with results)"/>
      </div>
      <button class="btn btn--primary search-bar__button">Button</button>
      <div class="search-bar__dropdown">
        <div class="list-item flex flex-justify-space-between flex-align-center">
          <div class="flex-column">
            <div class="text color-grey--800" v-text="option.label">Label</div>
            <div class="text color-grey--600" v-text="option.subtext">Subtext</div>
          </div>
          <div class="text color-grey--500" v-text="option.textOnRight">888 123 456</div>
        </div>
        <div class="list-item flex flex-justify-space-between flex-align-center">
          <div class="flex-column">
            <div class="text color-grey--800" v-text="option.label">Label 2</div>
            <div class="text color-grey--600" v-text="option.subtext">Subtext 2</div>
          </div>
          <div class="text color-grey--500" v-text="option.textOnRight">888 456 789</div>
        </div>
      </div>
    </form>
  </div>
</div>
.flex.flex-justify-space-between
  .ma-3.w-full
    form.search-bar
      .search-bar__input.flex
        svg.icon-32.color-grey--400.mr-2
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input.input.text(placeholder='Default state')
      button.btn.btn--primary.search-bar__button Button
      .search-bar__dropdown.pa-2
        .pa-16.flex.flex-justify-center.text-label.color-grey--400 No result found
        button.btn.btn--primary.w-full Button
  .ma-3.w-full
    form.search-bar
      .search-bar__input.flex.search-bar__input--active
        svg.icon-32.color-grey--400.mr-2
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input.input.text(placeholder='Active state')
      button.btn.btn--primary.search-bar__button Button
      .search-bar__dropdown.pa-2
        .pa-16.flex.flex-justify-center.text-label.color-grey--400 No result found
        button.btn.btn--primary.w-full Button
.flex.flex-justify-space-between
  .ma-3.w-full
    form.search-bar.search-bar--open
      .search-bar__input.flex
        svg.icon-32.color-grey--400.mr-2
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input.input.text(placeholder='Open list (no result)')
      button.btn.btn--primary.search-bar__button Button
      .search-bar__dropdown.pa-2
        .pa-16.flex.flex-justify-center.text-label.color-grey--400 No result found
        button.btn.btn--primary.w-full Button
  .ma-3.w-full
    form.search-bar.search-bar--open
      .search-bar__input.flex
        svg.icon-32.color-grey--400.mr-2
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input.input.text(placeholder='Open list (with results)')
      button.btn.btn--primary.search-bar__button Button
      .search-bar__dropdown
        .list-item.flex.flex-justify-space-between.flex-align-center
          .flex-column
            .text.color-grey--800(v-text='option.label') Label
            .text.color-grey--600(v-text='option.subtext') Subtext
          .text.color-grey--500(v-text='option.textOnRight') 888 123 456
        .list-item.flex.flex-justify-space-between.flex-align-center
          .flex-column
            .text.color-grey--800(v-text='option.label') Label 2
            .text.color-grey--600(v-text='option.subtext') Subtext 2
          .text.color-grey--500(v-text='option.textOnRight') 888 456 789

Step Indicator

<div class="step-indicators">
  <div class="step my-2">
    <svg class="icon-40 icon-color-white border-radius-rounded bg-color-primary--500">
      <use href="/svg/40x40/line/validate-alt.svg#validate-alt-line-40"></use>
    </svg><span class="step-text title-3 ml-4 color-grey--500">Information verification
      <div class="text-label">On 4th january</div></span>
  </div>
  <div class="step-separator h-8 bg-color-grey--500"></div>
  <div class="step my-2"><span class="step-number color-primary--700 border-radius-rounded">2</span><span class="step-text title-3 ml-4 color-primary--700">Financing motive
      <div class="text-label color-primary--600">Ongoing</div></span>
  </div>
  <div class="step-separator h-8 bg-color-grey--500"></div>
  <div class="step my-2"><span class="step-number color-grey--500 border-radius-rounded">3</span><span class="step-text title-3 ml-4 color-grey--700">Project description
      <div class="text-label color-grey--800">Approximately in 4 labor days</div></span>
  </div>
</div>
.step-indicators
  .step.my-2
    svg.icon-40.icon-color-white.border-radius-rounded.bg-color-primary--500
      use(href='/svg/40x40/line/validate-alt.svg#validate-alt-line-40')
    span.step-text.title-3.ml-4.color-grey--500
      | Information verification

      .text-label On 4th january
  .step-separator.h-8.bg-color-grey--500
  .step.my-2
    span.step-number.color-primary--700.border-radius-rounded 2
    span.step-text.title-3.ml-4.color-primary--700
      | Financing motive

      .text-label.color-primary--600 Ongoing
  .step-separator.h-8.bg-color-grey--500
  .step.my-2
    span.step-number.color-grey--500.border-radius-rounded 3
    span.step-text.title-3.ml-4.color-grey--700
      | Project description

      .text-label.color-grey--800 Approximately in 4 labor days

Sub Step

<div class="sub-step-indicators">
  <div class="sub-step"><span class="sub-step-bullet sub-step-bullet--past sub-step-bullet--first h-8 bg-color-grey--500 mr-9"></span><span class="color-grey--500">Information verification</span>
  </div>
  <div class="sub-step"><span class="sub-step-bullet sub-step-bullet--active h-8 bg-color-grey--500 mr-9"></span><span class="text-bold color-primary--600">Financing motive</span>
  </div>
  <div class="sub-step"><span class="sub-step-bullet sub-step-bullet--future sub-step-bullet--last h-8 bg-color-grey--500 mr-9"></span><span class="color-grey--800">Project description</span>
  </div>
</div>
.sub-step-indicators
  .sub-step
    span.sub-step-bullet.sub-step-bullet--past.sub-step-bullet--first.h-8.bg-color-grey--500.mr-9
    span.color-grey--500 Information verification
  .sub-step
    span.sub-step-bullet.sub-step-bullet--active.h-8.bg-color-grey--500.mr-9
    span.text-bold.color-primary--600 Financing motive
  .sub-step
    span.sub-step-bullet.sub-step-bullet--future.sub-step-bullet--last.h-8.bg-color-grey--500.mr-9
    span.color-grey--800 Project description

Tabs wrapper

This is a tabbed browsing wrapper, using multiple .tab-item molecule

<div class="tabs-wrapper">
  <div class="tab-item mr-2">
    <div class="tab-item__content">
      <div class="tab-item__content-banner"></div>
      <svg class="icon-16 mr-2 icon-color-grey--700">
        <use href="/svg/16x16/line/rights.svg#rights-line-16"></use>
      </svg>
      <div class="text-label">First tab</div>
    </div>
    <div class="tab-item__bottom-banner"></div>
  </div>
  <div class="tab-item mr-2 tab-item--active">
    <div class="tab-item__content">
      <div class="tab-item__content-banner"></div>
      <svg class="icon-16 mr-2 icon-color-primary--500">
        <use href="/svg/16x16/line/user-group.svg#user-group-line-16"></use>
      </svg>
      <div class="text-label">Second tab (active)</div>
    </div>
    <div class="tab-item__bottom-banner"></div>
  </div>
  <div class="tab-item mr-2">
    <div class="tab-item__content">
      <div class="tab-item__content-banner"></div>
      <svg class="icon-16 mr-2 icon-color-grey--700">
        <use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
      </svg>
      <div class="text-label">Third tab</div>
    </div>
    <div class="tab-item__bottom-banner"></div>
  </div>
  <div class="tab-item mr-2 tab-item--disabled">
    <div class="tab-item__content">
      <div class="tab-item__content-banner"></div>
      <svg class="icon-16 mr-2 icon-color-grey--700">
        <use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
      </svg>
      <div class="text-label">Fourth tab (disabled)</div>
    </div>
    <div class="tab-item__bottom-banner"></div>
  </div>
</div>
.tabs-wrapper
  .tab-item.mr-2
    .tab-item__content
      .tab-item__content-banner
      svg.icon-16.mr-2.icon-color-grey--700
        use(href='/svg/16x16/line/rights.svg#rights-line-16')
      .text-label First tab
    .tab-item__bottom-banner
  .tab-item.mr-2.tab-item--active
    .tab-item__content
      .tab-item__content-banner
      svg.icon-16.mr-2.icon-color-primary--500
        use(href='/svg/16x16/line/user-group.svg#user-group-line-16')
      .text-label Second tab (active)
    .tab-item__bottom-banner
  .tab-item.mr-2
    .tab-item__content
      .tab-item__content-banner
      svg.icon-16.mr-2.icon-color-grey--700
        use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
      .text-label Third tab
    .tab-item__bottom-banner
  .tab-item.mr-2.tab-item--disabled
    .tab-item__content
      .tab-item__content-banner
      svg.icon-16.mr-2.icon-color-grey--700
        use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
      .text-label Fourth tab (disabled)
    .tab-item__bottom-banner