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

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