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.
<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
Displayed on the left of the screen, it contains :
<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
Displayed on the right of the screen, it can contains details regarding a:
<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