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

Carousel

<div class="prismea-carousel">
  <div class="prismea-carousel--left-gradient"></div>
  <div class="prismea-carousel-navigation prismea-carousel-navigation-prev"><i class="prismea-icon prismea-glyph-12_arrow-left"></i></div>
  <div class="prismea-carousel--container">
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-carousel--item">
      <div class="prismea-carousel-card">
        <div class="prismea-carousel-card--action">
          <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
        </div>
        <div class="prismea-carousel-card--body">
          <div class="prismea-carousel-card--heading">
            <p class="prismea-text">Sub Label</p>
            <p class="prismea-text">Sub Label 2</p>
          </div>
          <div class="prismea-carousel-card--label">
            <p class="prismea-text">Main label</p>
          </div>
          <div class="prismea-carousel-card--footer">
            <p class="prismea-text -text-xs">Footer action</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-carousel--right-gradient"></div>
  <div class="prismea-carousel-navigation prismea-carousel-navigation-next"><i class="prismea-icon prismea-glyph-12_arrow-right"></i></div>
</div>

.prismea-carousel
  .prismea-carousel--left-gradient
  .prismea-carousel-navigation.prismea-carousel-navigation-prev
    i.prismea-icon.prismea-glyph-12_arrow-left
  .prismea-carousel--container
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
    .prismea-carousel--item
      .prismea-carousel-card
        .prismea-carousel-card--action
          button.prismea-icon-button.-circle.-color-primary
            i.prismea-icon-button--icon.prismea-glyph-16_settings
        .prismea-carousel-card--body
          .prismea-carousel-card--heading
            p.prismea-text Sub Label
            p.prismea-text Sub Label 2
          .prismea-carousel-card--label
            p.prismea-text Main label
          .prismea-carousel-card--footer
            p.prismea-text.-text-xs Footer action
  .prismea-carousel--right-gradient
  .prismea-carousel-navigation.prismea-carousel-navigation-next
    i.prismea-icon.prismea-glyph-12_arrow-right

Sidebar main

Displayed on the left of the screen, it contains :

Logged user infos
Navigation
App actions (parameters, disconnection, help, …)

<div class="prismea-webapp-sidebar-main">
  <div class="prismea-webapp--header">
    <div class="company-switcher  ">
      <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
      <div class="company-switcher-content">
        <div class="company-switcher-content__text">James Gordon</div>
        <div class="company-switcher-content__subtext">CyberLife Co.</div>
      </div>
    </div>
  </div>
  <hr class="prismea-line -light"/>
  <div class="prismea-webapp--navigation">
    <div class="prismea-vertical-spacing-10">
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral" style="display: block">+ 49 304,50 €</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item -selected ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item -disabled ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr class="prismea-line -light"/>
  <div class="prismea-webapp--footer">
    <div class="prismea-vertical-spacing-10">
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="prismea-list-item ion--hoverable -primary">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
            <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.prismea-webapp-sidebar-main
  .prismea-webapp--header
    .company-switcher
      .company-switcher-logo
        i.prismea-glyph-50-logo.prismea-icon
      .company-switcher-content
        .company-switcher-content__text James Gordon
        .company-switcher-content__subtext CyberLife Co.
  hr.prismea-line.-light
  .prismea-webapp--navigation
    .prismea-vertical-spacing-10
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
              span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral(style='display: block') + 49 304,50 €
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.-selected.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.-disabled.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
  hr.prismea-line.-light
  .prismea-webapp--footer
    .prismea-vertical-spacing-10
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item
      .prismea-vertical-spacing-10--slot
        .prismea-list-item.ion--hoverable.-primary
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              i.prismea-icon.prismea-glyph-24_dashboard
            .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
              span.prismea-menu-label(style='display: block') Menu item

Sidebar details

Displayed on the right of the screen, it can contains details regarding a:

Bank movement
Card
Collaborator
Direct debit
Transfer

<div class="prismea-webapp-sidebar-details" style="TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;">
  <div class="prismea-vertical-spacing-30--slot">
    <div class="prismea-close">
      <div class="prismea-vertical-spacing-20--slot">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close"></i></div>
          <div class="prismea-horizontal-spacing-5--slot">
            <p class="prismea-text -text-sm">Close</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-30--slot">
    <div class="prismea-vertical-spacing-5 -center">
      <div class="prismea-vertical-spacing-5--slot">
        <div class="prismea-horizontal-spacing-5 -justify-middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -primary prismea-glyph-24_dashboard"></i>
          </div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -center -text-xs">Title level 3
        </p>
      </div>
      <div class="prismea-vertical-spacing-5--slot">
        <h1 class="prismea-sidebar-title -color-primary">Primary</h1>
      </div>
      <div class="prismea-vertical-spacing-5--slot">
        <h1 class="prismea-sidebar-title">Second Title</h1>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card" style="margin-bottom:30px;">
      <div class="prismea-card--body">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-15">
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
              <div><span class="prismea-sidebar-text">Boris Vian</span>
              </div>
            </div>
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
              <div><span class="prismea-sidebar-text">The Strangers</span>
              </div>
            </div>
          </div>
        </div>
        <div class="prismea-card--footer -color-negative">
          <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
            <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
            </div>
            <div class="prismea-horizontal-spacing-15--slot">
              <p class="prismea-text">Push the red button
              </p>
            </div>
          </div>
          <div class="prismea-card--footer-hidden-text">
            <div class="prismea-vertical-spacing-10 -middle -justify-middle">
              <div class="prismea-vertical-spacing-15--slot">
                <p class="prismea-text">You're about to push the red button, are you sure?
                </p>
              </div>
              <div class="prismea-vertical-spacing-15--slot">
                <div class="prismea-horizontal-spacing-10 -justify-middle">
                  <div class="prismea-horizontal-spacing-15--slot">
                    <button class="prismea-button -short  -pill">Yes
                    </button>
                  </div>
                  <div class="prismea-horizontal-spacing-15--slot">
                    <button class="prismea-button -short  -pill">No
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--body">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-15">
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
              <div><span class="prismea-sidebar-text">Boris Vian</span>
              </div>
            </div>
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
              <div><span class="prismea-sidebar-text">The Strangers</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card ion--expandable" style="margin-bottom:30px;">
      <div class="prismea-card--body">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-15">
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
              <div><span class="prismea-sidebar-text">Boris Vian</span>
              </div>
            </div>
            <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
              <div><span class="prismea-sidebar-text">The Strangers</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.prismea-webapp-sidebar-details(style='TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;')
  .prismea-vertical-spacing-30--slot
    .prismea-close
      .prismea-vertical-spacing-20--slot
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_close
          .prismea-horizontal-spacing-5--slot
            p.prismea-text.-text-sm Close
  .prismea-vertical-spacing-30--slot
    .prismea-vertical-spacing-5.-center
      .prismea-vertical-spacing-5--slot
        .prismea-horizontal-spacing-5.-justify-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.-x2.-color-light.-circle.-primary.prismea-glyph-24_dashboard
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-center.-text-xs.
          Title level 3
          
      .prismea-vertical-spacing-5--slot
        h1.prismea-sidebar-title.-color-primary Primary
      .prismea-vertical-spacing-5--slot
        h1.prismea-sidebar-title Second Title
  .prismea-vertical-spacing-20--slot
    .prismea-card(style='margin-bottom:30px;')
      .prismea-card--body
        .prismea-card--slot
          .prismea-vertical-spacing-15
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
              div
                span.prismea-sidebar-text Boris Vian
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
              div
                span.prismea-sidebar-text The Strangers
        .prismea-card--footer.-color-negative
          .prismea-horizontal-spacing-10.-middle.-justify-middle
            .prismea-horizontal-spacing-15--slot
              i.prismea-icon.-x1.prismea-glyph-40_delete
            .prismea-horizontal-spacing-15--slot
              p.prismea-text.
                Push the red button
                
          .prismea-card--footer-hidden-text
            .prismea-vertical-spacing-10.-middle.-justify-middle
              .prismea-vertical-spacing-15--slot
                p.prismea-text.
                  You're about to push the red button, are you sure?
                  
              .prismea-vertical-spacing-15--slot
                .prismea-horizontal-spacing-10.-justify-middle
                  .prismea-horizontal-spacing-15--slot
                    button.prismea-button.-short.-pill.
                      Yes
                      
                  .prismea-horizontal-spacing-15--slot
                    button.prismea-button.-short.-pill.
                      No
                      
  .prismea-vertical-spacing-20--slot
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--body
        .prismea-card--slot
          .prismea-vertical-spacing-15
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
              div
                span.prismea-sidebar-text Boris Vian
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
              div
                span.prismea-sidebar-text The Strangers
  .prismea-vertical-spacing-20--slot
    .prismea-card.ion--expandable(style='margin-bottom:30px;')
      .prismea-card--body
        .prismea-card--slot
          .prismea-vertical-spacing-15
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
              div
                span.prismea-sidebar-text Boris Vian
            .prismea-vertical-spacing-15--slot
              span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
              div
                span.prismea-sidebar-text The Strangers