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