Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
<div class="prismea-carousel-card -primary">
<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--icon"><i class="prismea-icon prismea-glyph-24_balance"></i>
</div>
<div class="prismea-carousel-card--heading">
<p class="prismea-text">Sub Label</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 class="prismea-carousel-card -selected">
<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 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 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"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
<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--button">
<button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_recurrence"></i></button>
</div>
</div>
</div>
<div class="prismea-carousel-card -disabled">
<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"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
<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--button">
<button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_recurrence"></i></button>
</div>
</div>
</div>
<div class="prismea-carousel-card -disabled">
<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--button"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
</div>
</div>
</div>
.prismea-carousel-card.-primary
.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--icon
i.prismea-icon.prismea-glyph-24_balance
.prismea-carousel-card--heading
p.prismea-text Sub Label
.prismea-carousel-card--label
p.prismea-text Main label
.prismea-carousel-card--footer
p.prismea-text.-text-xs Footer action
.prismea-carousel-card.-selected
.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-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-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
span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge
.prismea-carousel-card--heading
p.prismea-text Sub Label
p.prismea-text Sub Label 2
.prismea-carousel-card--button
button.prismea-icon-button.-circle.-color-primary
i.prismea-icon-button--icon.prismea-glyph-16_recurrence
.prismea-carousel-card.-disabled
.prismea-carousel-card--action
button.prismea-icon-button.-circle.-color-primary
i.prismea-icon-button--icon.prismea-glyph-16_settings
.prismea-carousel-card--body
span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge
.prismea-carousel-card--heading
p.prismea-text Sub Label
p.prismea-text Sub Label 2
.prismea-carousel-card--button
button.prismea-icon-button.-circle.-color-primary
i.prismea-icon-button--icon.prismea-glyph-16_recurrence
.prismea-carousel-card.-disabled
.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--button
span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Chart with selectors
</p>
</div>
</div>
</div>
<div class="prismea-card--body">
<div class="prismea-card--slot">
<div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
</div>
</div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Chart with filters
</p>
</div>
</div>
</div>
<div class="prismea-card--body">
<div class="prismea-card--slot -with-filters">
<div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
<div class="prismea-chart--filters -height-400">
<div class="prismea-categories-filters">
<div class="categories-filters-table-head">
<div class="categories-filters-table-cell -middle">
<p class="prismea-text -text-bold -uppercase">Catégories</p>
</div>
<div class="categories-filters-table-cell -justify-end">
<p class="prismea-text -text-bold -uppercase">12 derniers mois</p>
</div>
<div class="categories-filters-table-cell -justify-end">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="search-select-filter is-open">
<div class="select-head"><i class="prismea-icon prismea-glyph-12_caret-up"></i>
<p class="prismea-text -text-bold -uppercase">Nov. 2020</p>
</div>
<div class="options">
<div class="divider"></div>
<ul>
<li><span>Sept. 2020</span></li>
<li><span>Août 2020</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="categories-filters-table-body">
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category1--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category1--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category1--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category2--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category2--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category2--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category3--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category3--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category3--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
</div>
<div class="categories-filters-table-footer">
<div></div>
<div class="categories-filters-table-cell">
<p class="prismea-text -text-bold -uppercase">Total sorties</p>
</div>
<div class="categories-filters-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="categories-filters-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Chart without Selectors
</p>
</div>
</div>
</div>
<div class="prismea-card--body">
<div class="prismea-card--slot">
<div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
</div>
</div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Chart loading
</p>
</div>
</div>
</div>
<div class="prismea-card--body">
<div class="prismea-card--slot">
<div class="prismea-chart--loader -height-400"></div>
</div>
</div>
</div>
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Chart with selectors
.prismea-card--body
.prismea-card--slot
.prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
span.prismea-text(style='width: 600px;text-align:center;') Chart
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Chart with filters
.prismea-card--body
.prismea-card--slot.-with-filters
.prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
span.prismea-text(style='width: 600px;text-align:center;') Chart
.prismea-chart--filters.-height-400
.prismea-categories-filters
.categories-filters-table-head
.categories-filters-table-cell.-middle
p.prismea-text.-text-bold.-uppercase Catégories
.categories-filters-table-cell.-justify-end
p.prismea-text.-text-bold.-uppercase 12 derniers mois
.categories-filters-table-cell.-justify-end
.prismea-horizontal-spacing-5.-middle
.search-select-filter.is-open
.select-head
i.prismea-icon.prismea-glyph-12_caret-up
p.prismea-text.-text-bold.-uppercase Nov. 2020
.options
.divider
ul
li
span Sept. 2020
li
span Août 2020
.categories-filters-table-body
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category1--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category1--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category1--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category2--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category2--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category2--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category3--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category3--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category3--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.categories-filters-table-footer
div
.categories-filters-table-cell
p.prismea-text.-text-bold.-uppercase Total sorties
.categories-filters-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.categories-filters-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Chart without Selectors
.prismea-card--body
.prismea-card--slot
.prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
span.prismea-text(style='width: 600px;text-align:center;') Chart
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Chart loading
.prismea-card--body
.prismea-card--slot
.prismea-chart--loader.-height-400
This is a block which has alternately a gray background and a white background
Used in the following pages:
Different classes exists to adapt the block to your needs.
-block
: By default the checkerboard is set to flex. You can put it to block instead.-expand
: allows the block to take full width.<div class="prismea-webapp-checkerboard-block">
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot">
<h2 class="prismea-title-2 prismea-color -color-primary">Langue</h2><span class="prismea-sidebar-text">Sauvegardez votre langue préférée</span>
</div>
</div>
</div>
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-select">
<div class="prismea-select--field -typed">
<div class="prismea-input--placeholder">Langue</div>
<div class="prismea-select--input">
<div class="prismea-select--label">
<p class="prismea-text">Français</p>
</div>
<div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
</div>
</div>
<div class="prismea-webapp-checkerboard-block">
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot">
<h2 class="prismea-title-2 prismea-color -color-primary">Paramètres d'affichage</h2><span class="prismea-sidebar-text">Sauvegardez vos paramètres d'affichage préférés</span>
</div>
</div>
</div>
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-select">
<div class="prismea-select--field -typed">
<div class="prismea-input--placeholder">Paramètres d'affichage</div>
<div class="prismea-select--input">
<div class="prismea-select--label">
<p class="prismea-text">Option 1</p>
</div>
<div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
</div>
</div>
<div class="prismea-webapp-checkerboard-block">
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot">
<h2 class="prismea-title-2 prismea-color -color-primary">Notifications</h2><span class="prismea-sidebar-text">Sauvegardez vos paramètres de notifications préférés</span>
</div>
</div>
</div>
<div class="prismea-webapp-checkerboard-block--slot">
<div class="prismea-select">
<div class="prismea-select--field -typed">
<div class="prismea-input--placeholder">Notifications</div>
<div class="prismea-select--input">
<div class="prismea-select--label">
<p class="prismea-text">Option 3</p>
</div>
<div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select--error"><span>Something bad happened</span></div>
</div>
</div>
</div>
.prismea-webapp-checkerboard-block
.prismea-webapp-checkerboard-block--slot
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
h2.prismea-title-2.prismea-color.-color-primary Langue
span.prismea-sidebar-text Sauvegardez votre langue préférée
.prismea-webapp-checkerboard-block--slot
.prismea-select
.prismea-select--field.-typed
.prismea-input--placeholder Langue
.prismea-select--input
.prismea-select--label
p.prismea-text Français
.prismea-select--caret
i.prismea-glyph-12_caret-down
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select--error
span Something bad happened
.prismea-webapp-checkerboard-block
.prismea-webapp-checkerboard-block--slot
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
h2.prismea-title-2.prismea-color.-color-primary Paramètres d'affichage
span.prismea-sidebar-text Sauvegardez vos paramètres d'affichage préférés
.prismea-webapp-checkerboard-block--slot
.prismea-select
.prismea-select--field.-typed
.prismea-input--placeholder Paramètres d'affichage
.prismea-select--input
.prismea-select--label
p.prismea-text Option 1
.prismea-select--caret
i.prismea-glyph-12_caret-down
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select--error
span Something bad happened
.prismea-webapp-checkerboard-block
.prismea-webapp-checkerboard-block--slot
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
h2.prismea-title-2.prismea-color.-color-primary Notifications
span.prismea-sidebar-text Sauvegardez vos paramètres de notifications préférés
.prismea-webapp-checkerboard-block--slot
.prismea-select
.prismea-select--field.-typed
.prismea-input--placeholder Notifications
.prismea-select--input
.prismea-select--label
p.prismea-text Option 3
.prismea-select--caret
i.prismea-glyph-12_caret-down
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select--error
span Something bad happened
Used to close the sidebar
<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>
.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
The company switcher is located in the top of the navigation bar and contains:
WITH .company-switcher--switchable
:
cursor: pointer
is set on the whole molecule and an arrow is displayed to make the user understand that he can switch the company. WITHOUT .company-switcher--switchable
:
cursor: pointer
& no arrow displayed.<div style="color: grey;">Company Switcher without arrow</div>
<div style="width: 220px; margin-bottom: 30px">
<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>
<div style="color: grey;">Company Switcher with arrow but INACTIVE</div>
<div style="width: 220px; margin-bottom: 30px">
<div class="company-switcher company-switcher--switchable ">
<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 class="company-switcher-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div>
</div>
</div>
<div style="color: grey;">Company Switcher with arrow and ACTIVE</div>
<div style="width: 220px; margin-bottom: 30px">
<div class="company-switcher company-switcher--switchable company-switcher--active">
<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 class="company-switcher-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div>
<div class="company-switcher-dropdown company-switcher-dropdown--visible">
<div class="company-switcher-dropdown-element">Entreprises de Jean Dupont</div>
<div class="company-switcher-dropdown-element company-switcher-dropdown-element--company company-switcher-dropdown-element--company-disabled">
<div class="company-switcher-dropdown-element__initiales">NO</div>
<div class="company-switcher-dropdown-element__name">
<p class="prismea-text prismea-color -color-grey4 -text-sm">Not Active Company</p>
<p class="prismea-text prismea-color -color-primary -text-xs">Please activate your account first</p>
</div>
</div>
<div class="company-switcher-dropdown-element company-switcher-dropdown-element--company">
<div class="company-switcher-dropdown-element__initiales">OT</div>
<div class="company-switcher-dropdown-element__name">
<p class="prismea-text prismea-color -text-sm">Other Company</p>
</div>
</div>
<div class="company-switcher-dropdown-element company-switcher-dropdown-element--company company-switcher-dropdown-element--company-current">
<div class="company-switcher-dropdown-element__initiales">PR</div>
<div class="company-switcher-dropdown-element__name">
<p class="prismea-text prismea-color -text-sm">Prismea</p>
</div>
<div class="company-switcher-dropdown-element__icon"><i class="prismea-icon prismea-glyph-16_checkbox"></i></div>
</div>
</div>
</div>
</div>
div(style='color: grey;') Company Switcher without arrow
div(style='width: 220px; margin-bottom: 30px')
.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.
div(style='color: grey;') Company Switcher with arrow but INACTIVE
div(style='width: 220px; margin-bottom: 30px')
.company-switcher.company-switcher--switchable
.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.
.company-switcher-arrow
i.prismea-icon.prismea-glyph-16_arrow-s
div(style='color: grey;') Company Switcher with arrow and ACTIVE
div(style='width: 220px; margin-bottom: 30px')
.company-switcher.company-switcher--switchable.company-switcher--active
.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.
.company-switcher-arrow
i.prismea-icon.prismea-glyph-16_arrow-s
.company-switcher-dropdown.company-switcher-dropdown--visible
.company-switcher-dropdown-element Entreprises de Jean Dupont
.company-switcher-dropdown-element.company-switcher-dropdown-element--company.company-switcher-dropdown-element--company-disabled
.company-switcher-dropdown-element__initiales NO
.company-switcher-dropdown-element__name
p.prismea-text.prismea-color.-color-grey4.-text-sm Not Active Company
p.prismea-text.prismea-color.-color-primary.-text-xs Please activate your account first
.company-switcher-dropdown-element.company-switcher-dropdown-element--company
.company-switcher-dropdown-element__initiales OT
.company-switcher-dropdown-element__name
p.prismea-text.prismea-color.-text-sm Other Company
.company-switcher-dropdown-element.company-switcher-dropdown-element--company.company-switcher-dropdown-element--company-current
.company-switcher-dropdown-element__initiales PR
.company-switcher-dropdown-element__name
p.prismea-text.prismea-color.-text-sm Prismea
.company-switcher-dropdown-element__icon
i.prismea-icon.prismea-glyph-16_checkbox
<div class="prismea-horizontal-spacing--slot" style="display: flex">
<div class="prismea-document-download-card">
<div class="prismea-document-download-card--title">Terms and conditions</div>
<div class="prismea-document-download-card--cta"><a class="prismea-button -primary -pill -outlined -icon-text"><i class="prismea-glyph-24_download"></i><span>Download file</span></a></div>
</div>
<div class="prismea-document-download-card">
<div class="prismea-document-download-card--title">Data protection and cookie policy</div>
<div class="prismea-document-download-card--cta"><a class="prismea-button -primary -pill -outlined -icon-text"><i class="prismea-glyph-24_download"></i><span>Download file</span></a></div>
</div>
</div>
.prismea-horizontal-spacing--slot(style='display: flex')
.prismea-document-download-card
.prismea-document-download-card--title Terms and conditions
.prismea-document-download-card--cta
a.prismea-button.-primary.-pill.-outlined.-icon-text
i.prismea-glyph-24_download
span Download file
.prismea-document-download-card
.prismea-document-download-card--title Data protection and cookie policy
.prismea-document-download-card--cta
a.prismea-button.-primary.-pill.-outlined.-icon-text
i.prismea-glyph-24_download
span Download file
Used as a jumbotron link block for marketing purposes
<a class="prismea-link-block" href="#"><i class="prismea-link-block--decoration prismea-glyph-24_marketing"></i><span class="prismea-link-block--wrapper"><span class="prismea-text prismea-color -color-light">This is a marketing CTA to access an external resource</span><i class="prismea-icon prismea-glyph-12_arrow-right prismea-color -color-light"></i></span></a>
a.prismea-link-block(href='#')
i.prismea-link-block--decoration.prismea-glyph-24_marketing
span.prismea-link-block--wrapper
span.prismea-text.prismea-color.-color-light This is a marketing CTA to access an external resource
i.prismea-icon.prismea-glyph-12_arrow-right.prismea-color.-color-light
Navigation list item in the webapp
The modifiers for this molecule are:
-selected
: when the list item is selected ion--hoverable
: enable list item hover <!-- Default navigation item-->
<div class="navigation-item -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>
<!-- Default navigation item-->
<div class="navigation-item -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 (w/ subText)</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral" style="display: block">+ 49 304,50 €</span>
</div>
</div>
</div>
<!-- Default navigation item-->
<div class="navigation-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 (Hoverable)</span>
</div>
</div>
</div>
<!-- Default navigation item-->
<div class="navigation-item -selected -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 (Selected)</span>
</div>
</div>
</div>
<!-- Navigation item with sub-items-->
<div class="navigation-sub-menu-wrapper">
<div class="navigation-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"><span class="prismea-menu-label" style="display: block">Menu item (With sub-items/closed)</span>
</div>
</div>
</div>
<div class="navigation-sub-items-wrapper">
<div class="navigation-item -primary">
<div class="sub-menu-bullet-point prismea-color -color-grey3">•</div><span class="prismea-menu-label" style="display: block">1st sub-item</span>
</div>
<div class="navigation-item -primary -selected">
<div class="sub-menu-bullet-point prismea-color -color-primary">•</div><span class="prismea-menu-label" style="display: block">2nd sub-item</span>
</div>
<div class="navigation-item -primary">
<div class="sub-menu-bullet-point prismea-color -color-grey3">•</div><span class="prismea-menu-label" style="display: block">3rd sub-item</span>
</div>
</div>
</div>
<!-- Navigation item with sub-items-->
<div class="navigation-sub-menu-wrapper">
<div class="navigation-item ion--hoverable -primary -selected">
<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"><span class="prismea-menu-label" style="display: block">Menu item (With sub-items/open)</span>
</div>
</div>
</div>
<div class="navigation-sub-items-wrapper navigation-sub-items-wrapper--visible">
<div class="navigation-item -primary">
<div class="sub-menu-bullet-point prismea-color -color-grey3">•</div><span class="prismea-menu-label" style="display: block">1st sub-item</span>
</div>
<div class="navigation-item -primary -selected">
<div class="sub-menu-bullet-point prismea-color -color-primary">•</div><span class="prismea-menu-label" style="display: block">2nd sub-item</span>
</div>
<div class="navigation-item -primary">
<div class="sub-menu-bullet-point prismea-color -color-grey3">•</div><span class="prismea-menu-label" style="display: block">3rd sub-item</span>
</div>
</div>
</div>
// Default navigation item
.navigation-item.-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
// Default navigation item
.navigation-item.-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 (w/ subText)
span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral(style='display: block') + 49 304,50 €
// Default navigation item
.navigation-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 (Hoverable)
// Default navigation item
.navigation-item.-selected.-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 (Selected)
// Navigation item with sub-items
.navigation-sub-menu-wrapper
.navigation-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
span.prismea-menu-label(style='display: block') Menu item (With sub-items/closed)
.navigation-sub-items-wrapper
.navigation-item.-primary
.sub-menu-bullet-point.prismea-color.-color-grey3 •
span.prismea-menu-label(style='display: block') 1st sub-item
.navigation-item.-primary.-selected
.sub-menu-bullet-point.prismea-color.-color-primary •
span.prismea-menu-label(style='display: block') 2nd sub-item
.navigation-item.-primary
.sub-menu-bullet-point.prismea-color.-color-grey3 •
span.prismea-menu-label(style='display: block') 3rd sub-item
// Navigation item with sub-items
.navigation-sub-menu-wrapper
.navigation-item.ion--hoverable.-primary.-selected
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_dashboard
.prismea-horizontal-spacing-10--slot
span.prismea-menu-label(style='display: block') Menu item (With sub-items/open)
.navigation-sub-items-wrapper.navigation-sub-items-wrapper--visible
.navigation-item.-primary
.sub-menu-bullet-point.prismea-color.-color-grey3 •
span.prismea-menu-label(style='display: block') 1st sub-item
.navigation-item.-primary.-selected
.sub-menu-bullet-point.prismea-color.-color-primary •
span.prismea-menu-label(style='display: block') 2nd sub-item
.navigation-item.-primary
.sub-menu-bullet-point.prismea-color.-color-grey3 •
span.prismea-menu-label(style='display: block') 3rd sub-item
Displayed when a table search/filter return no result
<div class="prismea-no-occurrence">
<svg class="prismea-no-occurrence--background-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 437 470" width="450" fill="currentColor">
<path d="M361.93 239.08a2.5 2.5 0 103.57-3.5l-2.75-2.8a2.5 2.5 0 10-3.57 3.5zM58.75 120.78a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM127 287.59a13.95 13.95 0 1019.58 2.4 13.95 13.95 0 00-19.58-2.4zm-96.91-29a3 3 0 00-4.92-1.68L1.56 277.5a3 3 0 001 5.1l29.64 10.14a3 3 0 003.91-3.42zM60.92 437l-3.31-2.41 2.39-3.32a2.5 2.5 0 00-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.42 3.37a2.5 2.5 0 004 2.95l2.41-3.31L58 441a2.5 2.5 0 002.95-4zm281.55-272.22a2.5 2.5 0 003.27 1.35l11-4.56a2.5 2.5 0 10-1.91-4.62l-11 4.56a2.5 2.5 0 00-1.36 3.27zM95.39 235a2.5 2.5 0 00-.93-3.41l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2L82 235a2.5 2.5 0 00.93 3.41 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 003.5-.93zm12.52 81.16a2.5 2.5 0 00-3.42-.91l-10.32 6a2.5 2.5 0 002.5 4.33l10.32-6a2.5 2.5 0 00.91-3.42zm28.79 53.41a3 3 0 00-2.1-2.14l-15.31-4.26a3 3 0 00-2.9.75L105 375.05a3 3 0 00-.8 2.89l4 15.38a3 3 0 002.1 2.14l15.3 4.26a3 3 0 002.91-.75l11.34-11.13a3 3 0 00.8-2.89zM321.09 91.44a3.79 3.79 0 10.06-5.35 3.79 3.79 0 00-.06 5.35zM50.66 202.1a23.58 23.58 0 10-33.35-.38 23.58 23.58 0 0033.35.38zM260.59 72.79a12.58 12.58 0 10-17.79-.2 12.58 12.58 0 0017.79.2zm77.68 76.9L349 139.33a2.5 2.5 0 00-3.47-3.6L334.8 146.1a2.5 2.5 0 103.47 3.6zM26.53 68.39l3.55 2L28 74a2.5 2.5 0 001 3.39 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 102.48-4.34l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55L29 64a2.5 2.5 0 00-3.4 1 2.5 2.5 0 00.93 3.39zm77.63 75.51a2.5 2.5 0 003.42-.91l6-10.32a2.5 2.5 0 10-4.33-2.5l-6 10.32a2.5 2.5 0 00.91 3.41zm99.84-8.12a3 3 0 002.1 2.14l4.19 1.16a3 3 0 002.9-.75l3.1-3a3 3 0 00.8-2.89L216 128.2a3 3 0 00-2.1-2.14l-4.19-1.16a3 3 0 00-2.91.75l-3.1 3a3 3 0 00-.8 2.89zm96.1 157.12l-7.68-4.78a3 3 0 00-4.58 2.45l-.3 9a3 3 0 004.41 2.74l8-4.26a3 3 0 00.13-5.15zm47.83-21.15a12.58 12.58 0 1017.66 2.16 12.58 12.58 0 00-17.68-2.16zm-207.86-179a3 3 0 00-3-.48l-12.29 4.66a3 3 0 00-1.9 2.32l-2.1 13a3 3 0 001.06 2.8l10.18 8.31a3 3 0 003 .48l12.29-4.66a3 3 0 001.9-2.33l2.11-13a3 3 0 00-1.07-2.8zm262.73 21.09a3 3 0 003.18-4.11l-8.56-21a3 3 0 00-5.15-.7L378.39 106a3 3 0 002 4.81zm-70.68 230.83l4.48-4.39a3 3 0 00.8-2.89l-1.57-6.08a3 3 0 00-2.1-2.14l-6-1.68a3 3 0 00-2.9.75l-4.48 4.39a3 3 0 00-.8 2.89l1.57 6.08a3 3 0 002.1 2.14l6 1.68a3 3 0 002.9-.75zm103.34-5.07l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2-2 3.55a2.5 2.5 0 004.34 2.48l2-3.55 3.55 2a2.5 2.5 0 002.48-4.34zm-51.71-7.81a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM413.92 210l-3.31-2.41 2.41-3.31a2.5 2.5 0 10-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.44 3.36a2.5 2.5 0 00.55 3.49 2.5 2.5 0 003.49-.55l2.41-3.31L411 214a2.5 2.5 0 002.95-4zm-62.09 165.3l-21.77 6.19a3 3 0 00-1.27 5L345 402.28a3 3 0 005-1.42l5.52-22a3 3 0 00-3.68-3.57zM187 447.79a12.58 12.58 0 1017.79.2 12.58 12.58 0 00-17.79-.2zM322.47 31.22a2.5 2.5 0 00-3.4 1l-5.84 10.39a2.5 2.5 0 004.35 2.39l5.84-10.39a2.5 2.5 0 00-.95-3.39zM190 19.23L186.74 6.5a3 3 0 00-2.1-2.14L172 .83a3 3 0 00-2.9.75l-9.38 9.21a3 3 0 00-.8 2.89l3.28 12.73a3 3 0 002.1 2.14l12.66 3.52a3 3 0 002.91-.75l9.38-9.21a3 3 0 00.75-2.88zm107.62 398.2a2.5 2.5 0 00-3.84 3.2l7.63 9.16a2.5 2.5 0 103.84-3.2zM278.3 90.35l-31-4.27a3 3 0 00-3.19 4.1l11.82 29a3 3 0 005.15.71l19.21-24.74a3 3 0 00-1.99-4.8z"></path>
</svg>
<div class="prismea-no-occurrence--content">
<div class="prismea-no-occurrence--content--message-box"><span>aucune carte</span><span>n'a été trouvée</span></div>
<div class="prismea-no-occurrence--content--decoration"><i class="prismea-icon -x3 prismea-glyph-12_delete"></i></div>
<button class="prismea-no-occurrence--action-button">réinitialiser les filtres</button>
</div>
</div>
.prismea-no-occurrence
svg.prismea-no-occurrence--background-image(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 437 470', width='450', fill='currentColor')
path(d='M361.93 239.08a2.5 2.5 0 103.57-3.5l-2.75-2.8a2.5 2.5 0 10-3.57 3.5zM58.75 120.78a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM127 287.59a13.95 13.95 0 1019.58 2.4 13.95 13.95 0 00-19.58-2.4zm-96.91-29a3 3 0 00-4.92-1.68L1.56 277.5a3 3 0 001 5.1l29.64 10.14a3 3 0 003.91-3.42zM60.92 437l-3.31-2.41 2.39-3.32a2.5 2.5 0 00-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.42 3.37a2.5 2.5 0 004 2.95l2.41-3.31L58 441a2.5 2.5 0 002.95-4zm281.55-272.22a2.5 2.5 0 003.27 1.35l11-4.56a2.5 2.5 0 10-1.91-4.62l-11 4.56a2.5 2.5 0 00-1.36 3.27zM95.39 235a2.5 2.5 0 00-.93-3.41l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2L82 235a2.5 2.5 0 00.93 3.41 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 003.5-.93zm12.52 81.16a2.5 2.5 0 00-3.42-.91l-10.32 6a2.5 2.5 0 002.5 4.33l10.32-6a2.5 2.5 0 00.91-3.42zm28.79 53.41a3 3 0 00-2.1-2.14l-15.31-4.26a3 3 0 00-2.9.75L105 375.05a3 3 0 00-.8 2.89l4 15.38a3 3 0 002.1 2.14l15.3 4.26a3 3 0 002.91-.75l11.34-11.13a3 3 0 00.8-2.89zM321.09 91.44a3.79 3.79 0 10.06-5.35 3.79 3.79 0 00-.06 5.35zM50.66 202.1a23.58 23.58 0 10-33.35-.38 23.58 23.58 0 0033.35.38zM260.59 72.79a12.58 12.58 0 10-17.79-.2 12.58 12.58 0 0017.79.2zm77.68 76.9L349 139.33a2.5 2.5 0 00-3.47-3.6L334.8 146.1a2.5 2.5 0 103.47 3.6zM26.53 68.39l3.55 2L28 74a2.5 2.5 0 001 3.39 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 102.48-4.34l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55L29 64a2.5 2.5 0 00-3.4 1 2.5 2.5 0 00.93 3.39zm77.63 75.51a2.5 2.5 0 003.42-.91l6-10.32a2.5 2.5 0 10-4.33-2.5l-6 10.32a2.5 2.5 0 00.91 3.41zm99.84-8.12a3 3 0 002.1 2.14l4.19 1.16a3 3 0 002.9-.75l3.1-3a3 3 0 00.8-2.89L216 128.2a3 3 0 00-2.1-2.14l-4.19-1.16a3 3 0 00-2.91.75l-3.1 3a3 3 0 00-.8 2.89zm96.1 157.12l-7.68-4.78a3 3 0 00-4.58 2.45l-.3 9a3 3 0 004.41 2.74l8-4.26a3 3 0 00.13-5.15zm47.83-21.15a12.58 12.58 0 1017.66 2.16 12.58 12.58 0 00-17.68-2.16zm-207.86-179a3 3 0 00-3-.48l-12.29 4.66a3 3 0 00-1.9 2.32l-2.1 13a3 3 0 001.06 2.8l10.18 8.31a3 3 0 003 .48l12.29-4.66a3 3 0 001.9-2.33l2.11-13a3 3 0 00-1.07-2.8zm262.73 21.09a3 3 0 003.18-4.11l-8.56-21a3 3 0 00-5.15-.7L378.39 106a3 3 0 002 4.81zm-70.68 230.83l4.48-4.39a3 3 0 00.8-2.89l-1.57-6.08a3 3 0 00-2.1-2.14l-6-1.68a3 3 0 00-2.9.75l-4.48 4.39a3 3 0 00-.8 2.89l1.57 6.08a3 3 0 002.1 2.14l6 1.68a3 3 0 002.9-.75zm103.34-5.07l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2-2 3.55a2.5 2.5 0 004.34 2.48l2-3.55 3.55 2a2.5 2.5 0 002.48-4.34zm-51.71-7.81a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM413.92 210l-3.31-2.41 2.41-3.31a2.5 2.5 0 10-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.44 3.36a2.5 2.5 0 00.55 3.49 2.5 2.5 0 003.49-.55l2.41-3.31L411 214a2.5 2.5 0 002.95-4zm-62.09 165.3l-21.77 6.19a3 3 0 00-1.27 5L345 402.28a3 3 0 005-1.42l5.52-22a3 3 0 00-3.68-3.57zM187 447.79a12.58 12.58 0 1017.79.2 12.58 12.58 0 00-17.79-.2zM322.47 31.22a2.5 2.5 0 00-3.4 1l-5.84 10.39a2.5 2.5 0 004.35 2.39l5.84-10.39a2.5 2.5 0 00-.95-3.39zM190 19.23L186.74 6.5a3 3 0 00-2.1-2.14L172 .83a3 3 0 00-2.9.75l-9.38 9.21a3 3 0 00-.8 2.89l3.28 12.73a3 3 0 002.1 2.14l12.66 3.52a3 3 0 002.91-.75l9.38-9.21a3 3 0 00.75-2.88zm107.62 398.2a2.5 2.5 0 00-3.84 3.2l7.63 9.16a2.5 2.5 0 103.84-3.2zM278.3 90.35l-31-4.27a3 3 0 00-3.19 4.1l11.82 29a3 3 0 005.15.71l19.21-24.74a3 3 0 00-1.99-4.8z')
.prismea-no-occurrence--content
.prismea-no-occurrence--content--message-box
span aucune carte
span n'a été trouvée
.prismea-no-occurrence--content--decoration
i.prismea-icon.-x3.prismea-glyph-12_delete
button.prismea-no-occurrence--action-button réinitialiser les filtres
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
<div class="prismea-notification--overlay -secondary"></div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<p class="prismea-text prismea-color -color-light">This is a notification</p>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
<div class="prismea-notification--overlay -secondary"></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_validate -color-light"></i></div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<p class="prismea-text prismea-color -color-light">This is a notification</p>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -negative">
<div class="prismea-notification--overlay -secondary"></div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<p class="prismea-text prismea-color -color-light">This is a notification</p>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -pending">
<div class="prismea-notification--overlay -secondary"></div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<p class="prismea-text prismea-color -color-light">This is a notification</p>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
.prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
.prismea-notification--overlay.-secondary
.prismea-horizontal-spacing-5--slot.-expand
p.prismea-text.prismea-color.-color-light This is a notification
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
.prismea-notification--overlay.-secondary
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_validate.-color-light
.prismea-horizontal-spacing-5--slot.-expand
p.prismea-text.prismea-color.-color-light This is a notification
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-negative
.prismea-notification--overlay.-secondary
.prismea-horizontal-spacing-5--slot.-expand
p.prismea-text.prismea-color.-color-light This is a notification
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-pending
.prismea-notification--overlay.-secondary
.prismea-horizontal-spacing-5--slot.-expand
p.prismea-text.prismea-color.-color-light This is a notification
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_close.-color-light
<div class="pagination">
<div class="results-count">182 résultats trouvés</div>
<div class="navigation">
<button class="-button">1</button>
<button class="-button"><span style="font-size: 0.7rem;">◀</span></button>
<button class="-button -far">2</button>
<button class="-button">3</button>
<button class="-button -active">4</button>
<button class="-button">5</button>
<button class="-button -far">6</button>
<button class="-button"><span style="font-size: 0.7rem;">▶</span></button>
<button class="-button">11</button>
</div>
<div class="items-per-page">
<div class="text">Résultats par page</div>
<div class="options">
<button class="-button -active">15</button>
<button class="-button">30</button>
<button class="-button">100</button>
</div>
</div>
</div>
.pagination
.results-count 182 résultats trouvés
.navigation
button.-button 1
button.-button
span(style='font-size: 0.7rem;') ◀
button.-button.-far 2
button.-button 3
button.-button.-active 4
button.-button 5
button.-button.-far 6
button.-button
span(style='font-size: 0.7rem;') ▶
button.-button 11
.items-per-page
.text Résultats par page
.options
button.-button.-active 15
button.-button 30
button.-button 100
<div>
<div class="prismea-radio-button-list">
<label class="prismea-radio-button -center -large" for="1">
<input id="1" type="radio" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Meat</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button -center -large" for="2">
<input id="2" type="radio" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Vegetables</span><span class="prismea-radio-button--legend prismea-numeral">I am a legend</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button -center -large -disabled" for="3">
<input id="3" type="radio" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Alcohol</span><span class="prismea-radio-button--legend prismea-numeral">I am a vodka</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
</div>
</div>
<div>
<div class="prismea-radio-button-list">
<label class="prismea-radio-button" for="4">
<input id="4" type="checkbox" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Meat</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button" for="5">
<input id="5" type="checkbox" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Vegetables</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button -disabled" for="6">
<input id="6" type="checkbox" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Milk</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
</div>
</div>
<div>
<div class="prismea-radio-button-list">
<label class="prismea-radio-button" for="7">
<input id="7" type="checkbox" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Leslie Alexander</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 795,90€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button -disabled" for="8">
<input id="8" type="checkbox" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Guy Hawkins</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 791,91€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
<label class="prismea-radio-button" for="9">
<input id="9" type="checkbox" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Leslie Alexander</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 795,90€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
</label>
</div>
</div>
div
.prismea-radio-button-list
label.prismea-radio-button.-center.-large(for='1')
input#1(type='radio', name='radio')
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Meat
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button.-center.-large(for='2')
input#2(type='radio', name='radio', checked)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Vegetables
span.prismea-radio-button--legend.prismea-numeral I am a legend
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button.-center.-large.-disabled(for='3')
input#3(type='radio', name='radio', disabled)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Alcohol
span.prismea-radio-button--legend.prismea-numeral I am a vodka
i.prismea-icon.prismea-glyph-12_validate
div
.prismea-radio-button-list
label.prismea-radio-button(for='4')
input#4(type='checkbox', name='radio')
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Meat
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button(for='5')
input#5(type='checkbox', name='radio', checked)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Vegetables
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button.-disabled(for='6')
input#6(type='checkbox', name='radio', disabled)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Milk
i.prismea-icon.prismea-glyph-12_validate
div
.prismea-radio-button-list
label.prismea-radio-button(for='7')
input#7(type='checkbox', name='radio')
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Leslie Alexander
span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
span.prismea-numeral 2 795,90€
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button.-disabled(for='8')
input#8(type='checkbox', name='radio', disabled)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Guy Hawkins
span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
span.prismea-numeral 2 791,91€
i.prismea-icon.prismea-glyph-12_validate
label.prismea-radio-button(for='9')
input#9(type='checkbox', name='radio', checked)
span.prismea-radio-button--container.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot
span.prismea-radio-button--label Leslie Alexander
span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
span.prismea-numeral 2 795,90€
i.prismea-icon.prismea-glyph-12_validate
Used to enable select auto completion
<div class="prismea-select-input">
<div class="prismea-select--field">
<div class="prismea-input ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input -error">
<div class="prismea-select--field -error">
<div class="prismea-input -error ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input">
<div class="prismea-select--field -typed -disabled">
<div class="prismea-input ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input">
<div class="prismea-select--field -typed">
<div class="prismea-input ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input" style="margin-bottom: 221px;">
<div class="prismea-select--field -open">
<div class="prismea-input ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input" style="margin-bottom: 221px;">
<div class="prismea-select--field -typed -open">
<div class="prismea-input ">
<div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
<input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
<ul class="prismea-select--options">
<li class="prismea-select--option">
<p class="prismea-text">Option 1 -hover me-</p>
</li>
<li class="prismea-select--option -selected">
<p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 4</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 5</p>
</li>
<li class="prismea-select--option">
<p class="prismea-text">Option 6</p>
</li>
</ul>
</div>
<div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
.prismea-select-input
.prismea-select--field
.prismea-input
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
.prismea-select-input.-error
.prismea-select--field.-error
.prismea-input.-error
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
.prismea-select-input
.prismea-select--field.-typed.-disabled
.prismea-input
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
.prismea-select-input
.prismea-select--field.-typed
.prismea-input
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
.prismea-select-input(style='margin-bottom: 221px;')
.prismea-select--field.-open
.prismea-input
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
.prismea-select-input(style='margin-bottom: 221px;')
.prismea-select--field.-typed.-open
.prismea-input
.prismea-input--container
span.prismea-input--placeholder Mighty text
input(type='text')
i.prismea-input--icon-suffix.prismea-glyph-16_period
.prismea-input--error
span Something bad happened
ul.prismea-select--options
li.prismea-select--option
p.prismea-text Option 1 -hover me-
li.prismea-select--option.-selected
p.prismea-text Option 3 -selected-
i.prismea-icon.prismea-glyph-12_validate
li.prismea-select--option
p.prismea-text Option 4
li.prismea-select--option
p.prismea-text Option 5
li.prismea-select--option
p.prismea-text Option 6
.prismea-select-input--error
span Something bad happened
<div class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Simple card
</p>
</div>
</div>
</div>
<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 class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">With footer (closed)
</p>
</div>
</div>
</div>
<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 class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">With footer (open)
</p>
</div>
</div>
</div>
<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 -open -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 class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--body">
<div class="prismea-card--slot">
<div class="prismea-horizontal-spacing-10 -middle -justify-middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_outgoing-transfer"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot"><span class="prismea-sidebar-text -button">Do this stuff</span>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--title -category1">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Category 1
</p>
</div>
</div>
</div>
<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 class="prismea-card ion--expandable" style="margin-bottom:30px;">
<div class="prismea-card--title -category1">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Category 1 (expandable / not expanded)
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<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 class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -category1">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">Category 1 (expandable / expanded)
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<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 class="prismea-card" style="margin-bottom:30px;">
<div class="prismea-card--title">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot">
<p class="prismea-text">With input range
</p>
</div>
</div>
</div>
<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 class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Payment and withdrawal limits</span>
</div>
<div class="prismea-vertical-spacing-15--slot">
<div class="prismea-tuple mb-1">
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Payment monthly limit</span>
</div>
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Modify</span>
</div>
</div>
<div class="mb-2">
<div class="prismea-sidebar-text -min prismea-numeral">220,37 / 880 €</div>
</div>
<div class="prismea-progress-bar">
<div class="prismea-progress-bar--filled" style="width: 25%"></div>
</div>
</div>
<div class="prismea-vertical-spacing-15--slot">
<div class="prismea-tuple mb-1">
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Withdrawal monthly limit</span>
</div>
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Modify</span>
</div>
</div>
<div class="mb-2">
<div class="prismea-sidebar-text -min prismea-numeral">220,37 / 500 €</div>
</div>
<div class="prismea-progress-bar">
<div class="prismea-progress-bar--filled" style="width: 48%"></div>
</div>
</div>
<div class="prismea-vertical-spacing-15--slot">
<div class="prismea-tuple">
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Withdrawal weekly limit</span>
</div>
<div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Cancel</span>
</div>
</div>
<div class="prismea-input prismea-input-range " style="--min:0; --max:100; --value:50; --text-min:"0"; --text-max:"100";">
<div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">Weekly withdrawals</span>
<input class="prismea-input-range--input" type="range" value="50" min="0" max="100" step="10"/>
<output class="prismea-input-range--output-up">50</output>
<output class="prismea-input-range--output-down">Valider</output>
</div>
<div class="prismea-input--error"><span>Something bad happened</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
.prismea-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Simple card
.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(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
With footer (closed)
.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-card(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
With footer (open)
.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.-open.-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-card(style='margin-bottom:30px;')
.prismea-card--body
.prismea-card--slot
.prismea-horizontal-spacing-10.-middle.-justify-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_outgoing-transfer
.prismea-horizontal-spacing-15--slot
span.prismea-sidebar-text.-button Do this stuff
.prismea-card(style='margin-bottom:30px;')
.prismea-card--title.-category1
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Category 1
.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.ion--expandable(style='margin-bottom:30px;')
.prismea-card--title.-category1
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Category 1 (expandable / not expanded)
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.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.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-category1
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
Category 1 (expandable / expanded)
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.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(style='margin-bottom:30px;')
.prismea-card--title
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.-x1.prismea-glyph-16_admin-sub
.prismea-horizontal-spacing-15--slot
p.prismea-text.
With input range
.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-15--slot
span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Payment and withdrawal limits
.prismea-vertical-spacing-15--slot
.prismea-tuple.mb-1
.prismea-tuple--slot
span.prismea-sidebar-text Payment monthly limit
.prismea-tuple--slot
span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Modify
.mb-2
.prismea-sidebar-text.-min.prismea-numeral 220,37 / 880 €
.prismea-progress-bar
.prismea-progress-bar--filled(style='width: 25%')
.prismea-vertical-spacing-15--slot
.prismea-tuple.mb-1
.prismea-tuple--slot
span.prismea-sidebar-text Withdrawal monthly limit
.prismea-tuple--slot
span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Modify
.mb-2
.prismea-sidebar-text.-min.prismea-numeral 220,37 / 500 €
.prismea-progress-bar
.prismea-progress-bar--filled(style='width: 48%')
.prismea-vertical-spacing-15--slot
.prismea-tuple
.prismea-tuple--slot
span.prismea-sidebar-text Withdrawal weekly limit
.prismea-tuple--slot
span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Cancel
.prismea-input.prismea-input-range(style='--min:0; --max:100; --value:50; --text-min:"0"; --text-max:"100";')
.prismea-input--container.prismea-input-range--container.-typed
span.prismea-input--placeholder Weekly withdrawals
input.prismea-input-range--input(type='range', value='50', min='0', max='100', step='10')
output.prismea-input-range--output-up 50
output.prismea-input-range--output-down Valider
.prismea-input--error
span Something bad happened
Used to display and update tag/category for a bank movement
<div style="display:flex;">
<!-- without selectedTag-->
<div style="width: 305px; margin: 0 auto;">
<!-- closed-->
<div class="prismea-card ion--expandable" style="margin-bottom:30px;">
<div class="prismea-card--title -color-grey3 -color-black-hover">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Add a tag
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Hotels</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Fuel</div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- expanded-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -color-grey3 -color-black-hover">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Add a tag
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Hotels</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Fuel</div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- category highlighted (suggestions and categories are hidden, search is NOT active)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -color-grey3 -color-black-hover">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Add a tag
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-vertical-spacing-20">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -shifted -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- category highlighted (suggestions and categories are hidden, search is active)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -color-grey3 -color-black-hover">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Add a tag
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-vertical-spacing-20">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -shifted -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container -typed">
<input type="text" value="r"/>
<div class="prismea-input--actions">
<div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- search is active (global search)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -color-grey3 -color-black-hover">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Add a tag
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Hotels</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
<div class="prismea-sidebar-text prismea-color">Fuel</div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container -typed">
<input type="text" value="r"/>
<div class="prismea-input--actions">
<div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- with selectedTag-->
<div style="width: 305px; margin: 0 auto;">
<!-- closed-->
<div class="prismea-card ion--expandable" style="margin-bottom:30px;">
<div class="prismea-card--title -category2 -color-light">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Restaurants
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- expanded-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -category2 -color-light">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Restaurants
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- category highlighted (suggestions and categories are hidden, search is NOT active)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -category2 -color-light">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Restaurants
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-vertical-spacing-20">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -shifted -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container">
<input type="text" value=""/>
<div class="prismea-input--actions">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Fuel</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- category highlighted (suggestions and categories are hidden, search is active)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -category2 -color-light">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Restaurants
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-vertical-spacing-20">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -shifted -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container -typed">
<input type="text" value="r"/>
<div class="prismea-input--actions">
<div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- search is active (global search)-->
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
<div class="prismea-card--title -category2 -color-light">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
</div>
<div class="prismea-horizontal-spacing-15--slot -expand">
<p class="prismea-text">Restaurants
</p>
</div>
</div>
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<div class="prismea-card--body prismea-card-tag-selector">
<div class="prismea-card--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-card-tag-selector--scrollable-area">
<!-- list of all suggested tags-->
<div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
<div class="prismea-card-tag-selector--list-item">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Administrative</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Business trip</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Capital</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Commissions</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Employee</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
<div class="prismea-card-tag-selector--list-item ion-hoverable">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-sidebar-text">Finance</div>
</div>
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
</div>
<div class="prismea-card-tag-selector--search -active">
<div class="prismea-card-tag-selector--search-container">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
<div class="prismea-horizontal-spacing-10--slot -expand">
<div class="prismea-input">
<div class="prismea-input--container -typed">
<input type="text" value="r"/>
<div class="prismea-input--actions">
<div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Administrative</div>
<div class="prismea-sidebar-text">Postal charges</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Business trip</div>
<div class="prismea-sidebar-text">Restaurants</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-20--slot">
<div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
<div>
<div class="prismea-sidebar-text -tag">Finance</div>
<div class="prismea-sidebar-text">Term account</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
div(style='display:flex;')
// without selectedTag
div(style='width: 305px; margin: 0 auto;')
// closed
.prismea-card.ion--expandable(style='margin-bottom:30px;')
.prismea-card--title.-color-grey3.-color-black-hover
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_category-placeholder
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Add a tag
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Hotels
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Fuel
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
// expanded
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-color-grey3.-color-black-hover
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_category-placeholder
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Add a tag
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Hotels
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Fuel
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
// category highlighted (suggestions and categories are hidden, search is NOT active)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-color-grey3.-color-black-hover
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_category-placeholder
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Add a tag
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-vertical-spacing-20
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip (user clicked on it)
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-up
.prismea-card-tag-selector--search.-shifted.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Restaurants
// category highlighted (suggestions and categories are hidden, search is active)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-color-grey3.-color-black-hover
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_category-placeholder
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Add a tag
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-vertical-spacing-20
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip (user clicked on it)
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-up
.prismea-card-tag-selector--search.-shifted.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container.-typed
input(type='text', value='r')
.prismea-input--actions
.prismea-input--actions-item
i.prismea-glyph-16_close
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Restaurants
// search is active (global search)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-color-grey3.-color-black-hover
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_category-placeholder
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Add a tag
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Hotels
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
.prismea-sidebar-text.prismea-color Fuel
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container.-typed
input(type='text', value='r')
.prismea-input--actions
.prismea-input--actions-item
i.prismea-glyph-16_close
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
// with selectedTag
div(style='width: 305px; margin: 0 auto;')
// closed
.prismea-card.ion--expandable(style='margin-bottom:30px;')
.prismea-card--title.-category2.-color-light
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Restaurants
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
// expanded
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-category2.-color-light
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Restaurants
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
// category highlighted (suggestions and categories are hidden, search is NOT active)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-category2.-color-light
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Restaurants
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-vertical-spacing-20
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip (user clicked on it)
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-up
.prismea-card-tag-selector--search.-shifted.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container
input(type='text')
.prismea-input--actions.
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Fuel
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Restaurants
// category highlighted (suggestions and categories are hidden, search is active)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-category2.-color-light
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Restaurants
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-vertical-spacing-20
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip (user clicked on it)
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-up
.prismea-card-tag-selector--search.-shifted.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container.-typed
input(type='text', value='r')
.prismea-input--actions
.prismea-input--actions-item
i.prismea-glyph-16_close
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text Restaurants
// search is active (global search)
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
.prismea-card--title.-category2.-color-light
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-15--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-15--slot.-expand
p.prismea-text.
Restaurants
.prismea-horizontal-spacing-10.-middle
.prismea-card--title-caret
i.prismea-icon.-x1.prismea-glyph-12_caret-down
.prismea-card--body.prismea-card-tag-selector
.prismea-card--slot
.prismea-vertical-spacing-10
.prismea-card-tag-selector--scrollable-area
// list of all suggested tags
.prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
.prismea-card-tag-selector--list-item
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Administrative
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Business trip
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_capital
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Capital
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_commission
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Commissions
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_collaborators-management
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Employee
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--list-item.ion-hoverable
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
.prismea-horizontal-spacing-10--slot.-expand
.prismea-sidebar-text Finance
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-card-tag-selector--search.-active
.prismea-card-tag-selector--search-container
.prismea-vertical-spacing-20--slot
.prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-16_search
.prismea-horizontal-spacing-10--slot.-expand
.prismea-input
.prismea-input--container.-typed
input(type='text', value='r')
.prismea-input--actions
.prismea-input--actions-item
i.prismea-glyph-16_close
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_management
div
.prismea-sidebar-text.-tag Administrative
.prismea-sidebar-text Postal charges
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_trip
div
.prismea-sidebar-text.-tag Business trip
.prismea-sidebar-text Restaurants
.prismea-vertical-spacing-20--slot
.prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-glyph-24_finance
div
.prismea-sidebar-text.-tag Finance
.prismea-sidebar-text Term account
Used to display main infos of the sidebar
<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 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 -category1 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-category1">Category 1</h1>
</div>
<div class="prismea-vertical-spacing-5--slot">
<h1 class="prismea-sidebar-title">Second Title</h1>
</div>
</div>
<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 -category2 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-category2">Category 2</h1>
</div>
<div class="prismea-vertical-spacing-5--slot">
<h1 class="prismea-sidebar-title">Second Title</h1>
</div>
</div>
<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 -category3 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-category3">Category 3</h1>
</div>
<div class="prismea-vertical-spacing-5--slot">
<h1 class="prismea-sidebar-title">Second Title</h1>
</div>
</div>
<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 -category4 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-category4">Category 4</h1>
</div>
<div class="prismea-vertical-spacing-5--slot">
<h1 class="prismea-sidebar-title">Second Title</h1>
</div>
</div>
.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-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.-category1.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-category1 Category 1
.prismea-vertical-spacing-5--slot
h1.prismea-sidebar-title Second Title
.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.-category2.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-category2 Category 2
.prismea-vertical-spacing-5--slot
h1.prismea-sidebar-title Second Title
.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.-category3.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-category3 Category 3
.prismea-vertical-spacing-5--slot
h1.prismea-sidebar-title Second Title
.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.-category4.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-category4 Category 4
.prismea-vertical-spacing-5--slot
h1.prismea-sidebar-title Second Title
<div class="prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot prismea-title-1 prismea-color -color-grey3">Some Title</span>
<div class="prismea-icon -superscript prismea-glyph-12_info -color-grey5">
<div class="prismea-superscript-tooltip prismea-badge -rounded -uppercase prismea-color -primary">En attente : 100,00 $</div>
</div>
</div>
<div class="prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot prismea-title-1 prismea-color -color-grey3">Some Title</span>
<div class="prismea-icon -superscript prismea-glyph-12_info -color-grey5">
<div class="prismea-superscript-tooltip -show prismea-badge -rounded -uppercase prismea-color -pending">En attente : 100,00 $</div>
</div>
</div>
.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot.prismea-title-1.prismea-color.-color-grey3 Some Title
.prismea-icon.-superscript.prismea-glyph-12_info.-color-grey5
.prismea-superscript-tooltip.prismea-badge.-rounded.-uppercase.prismea-color.-primary En attente : 100,00 $
.prismea-horizontal-spacing-10
span.prismea-horizontal-spacing-10--slot.prismea-title-1.prismea-color.-color-grey3 Some Title
.prismea-icon.-superscript.prismea-glyph-12_info.-color-grey5
.prismea-superscript-tooltip.-show.prismea-badge.-rounded.-uppercase.prismea-color.-pending En attente : 100,00 $
A table can be:
-equivalent
: all cells have the same proportions, if not, it will be automatic-striped
: odd body lines are in another color than evenTable rows can have a pending status if some requests are done for the entire row. For that you can add the class -pending
to the prismea-table--cell
You can set an expandable row by adding a second tr with ion--expandable
class. However the behaviour will be set on the JS side.
<h2>Auto</h2>
<table class="prismea-table -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Disabled Table</h2>
<table class="prismea-table -text-sm -disabled">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Disabled / Highlighted Line</h2>
<table class="prismea-table -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ion--disabled">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -highlighted">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Equivalent / First column 400 / Row with badge</h2>
<table class="prismea-table -equivalent -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell -width-400">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1
<div class="prismea-table--alert-text prismea-badge prismea-color -rounded -uppercase -negative">Wrong</div></a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row disabled</h2>
<table class="prismea-table -striped -equivalent -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell -width-400">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ion--disabled">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row selected</h2>
<table class="prismea-table -striped -equivalent -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell -width-400">Column A</th>
<th class="prismea-table--cell -center">Column B</th>
<th class="prismea-table--cell -center">Column C</th>
<th class="prismea-table--cell -center">Column D</th>
<th class="prismea-table--cell -center">Column E</th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -selected">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row selected / Custom Headers</h2>
<table class="prismea-table -as-plan -striped -equivalent -text-sm">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th class="prismea-table--cell -width-400">Column A</th>
<th class="prismea-table--cell-spacer -width-15"></th>
<th class="prismea-table--cell -center -primary -color-grey1 -selected">Column B
<div class="prismea-table--cell-selected-border -shadow-color-primary" style="height:482px"></div>
</th>
<th class="prismea-table--cell-spacer -width-15"></th>
<th class="prismea-table--cell -center -secondary -color-grey1"> Column C</th>
<th class="prismea-table--cell-spacer -width-15"></th>
<th class="prismea-table--cell -center -tertiary -color-grey1"> Column D</th>
<th class="prismea-table--cell-spacer -width-15"></th>
<th class="prismea-table--cell -center -color-primary"> Column E</th>
<th class="prismea-table--cell-spacer -width-15"></th>
<th class="prismea-table--cell -center"></th>
</tr>
</thead>
<tbody class="prismea-table--body">
<tr class="ion--hoverable prismea-table--line ">
<td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -selected">
<td class="prismea-table--cell">Line A2</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell">Line A3</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4 -ion--expanded">
<td class="prismea-table--cell">
<div class="prismea-horizontal-spacing-5">
<div class="prismea-horizontal-spacing-5--slot">
<p class="prismea-text">Line A4</p>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
</div>
</div>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<div class="prismea-contextual-menu ion--close">
<div class="prismea-contextual-menu--button">
<button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
</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>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center -action--cell">
<div>
<button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
<button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
</div>
</td>
</tr>
<tr class="prismea-table--line ion--expandable">
<td class="prismea-table--cell">
<div class="prismea-table--expanded-cell">
<div class="prismea-vertical-spacing-15">
<p class="prismea-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias</p>
</div>
</div>
</td>
<td class="prismea-table--cell" colspan="10">
<div class="prismea-table--expanded-cell">
<div class="prismea-vertical-spacing-15"></div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr class="prismea-table--line ion--hoverable -ion--staggered-4">
<td class="prismea-table--cell"></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-button -link -pill" style="margin: 0 5px;">Button
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-button -secondary -pill" style="margin: 0 5px;">Button
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center">
<button class="prismea-button -tertiary -pill" style="margin: 0 5px;">Button
</button>
</td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"></td>
<td class="prismea-table--cell-spacer -width-15"></td>
<td class="prismea-table--cell -center"></td>
</tr>
</tfoot>
</table>
h2 Auto
table.prismea-table.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Disabled Table
table.prismea-table.-text-sm.-disabled
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Disabled / Highlighted Line
table.prismea-table.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line.ion--disabled
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-highlighted
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / First column 400 / Row with badge
table.prismea-table.-equivalent.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell.-width-400 Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line
td.prismea-table--cell
a.prismea-link.-hoverable(href='#')
| Line A1
.prismea-table--alert-text.prismea-badge.prismea-color.-rounded.-uppercase.-negative Wrong
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row disabled
table.prismea-table.-striped.-equivalent.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell.-width-400 Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line.ion--disabled
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row selected
table.prismea-table.-striped.-equivalent.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell.-width-400 Column A
th.prismea-table--cell.-center Column B
th.prismea-table--cell.-center Column C
th.prismea-table--cell.-center Column D
th.prismea-table--cell.-center Column E
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-selected
td.prismea-table--cell Line A2
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row selected / Custom Headers
table.prismea-table.-as-plan.-striped.-equivalent.-text-sm
thead.prismea-table--head
tr.prismea-table--line
th.prismea-table--cell.-width-400 Column A
th.prismea-table--cell-spacer.-width-15
th.prismea-table--cell.-center.-primary.-color-grey1.-selected
| Column B
.prismea-table--cell-selected-border.-shadow-color-primary(style='height:482px')
th.prismea-table--cell-spacer.-width-15
th.prismea-table--cell.-center.-secondary.-color-grey1 Column C
th.prismea-table--cell-spacer.-width-15
th.prismea-table--cell.-center.-tertiary.-color-grey1 Column D
th.prismea-table--cell-spacer.-width-15
th.prismea-table--cell.-center.-color-primary Column E
th.prismea-table--cell-spacer.-width-15
th.prismea-table--cell.-center
tbody.prismea-table--body
tr.ion--hoverable.prismea-table--line
td.prismea-table--cell
a.prismea-link.-hoverable(href='#') Line A1
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral Line B1 numeral
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-positive Line D1
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-selected
td.prismea-table--cell Line A2
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral Line B2 numeral
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
i.prismea-switch--button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-negative Line D2
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-faded
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell Line A3
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--hoverable.-ion--staggered-4.-ion--expanded
td.prismea-table--cell
.prismea-horizontal-spacing-5
.prismea-horizontal-spacing-5--slot
p.prismea-text Line A4
.prismea-horizontal-spacing-5--slot
button.prismea-icon-button
i.prismea-icon-button--icon.prismea-glyph-16_export
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral Line B3 numeral
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
i.prismea-switch--button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
span.prismea-numeral.prismea-color.-color-pending Line D3
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
.prismea-contextual-menu.ion--close
.prismea-contextual-menu--button
button.prismea-contextual-button.-invisible
i.prismea-contextual-button--icon.prismea-glyph-16_document
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
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center.-action--cell
div
button.prismea-icon-button.-invisible.-selected
i.prismea-icon-button--icon.prismea-glyph-16_export
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_checkbox
button.prismea-icon-button.-invisible
i.prismea-icon-button--icon.prismea-glyph-16_card
tr.prismea-table--line.ion--expandable
td.prismea-table--cell
.prismea-table--expanded-cell
.prismea-vertical-spacing-15
p.prismea-text At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
td.prismea-table--cell(colspan='10')
.prismea-table--expanded-cell
.prismea-vertical-spacing-15
tfoot
tr.prismea-table--line.ion--hoverable.-ion--staggered-4
td.prismea-table--cell
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-button.-link.-pill(style='margin: 0 5px;').
Button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-button.-secondary.-pill(style='margin: 0 5px;').
Button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
button.prismea-button.-tertiary.-pill(style='margin: 0 5px;').
Button
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
td.prismea-table--cell-spacer.-width-15
td.prismea-table--cell.-center
This table is located in the settings of the webapp
<table class="table-authorizations">
<thead class="prismea-table--head">
<tr class="prismea-table--line">
<th></th>
<th class="prismea-table--cell -width-200 prismea-color -color-grey5 -border-right">Lecture</th>
<th class="prismea-table--cell -width-200 prismea-color -color-grey5">Écriture</th>
<th></th>
<th></th>
</tr>
<tr class="prismea-table--line">
<th class="prismea-table--cell -width-300"></th>
<th class="prismea-table--cell -width-200 -border-right">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Read movements</span></div>
<div class="prismea-vertical-spacing-5--slot">
<div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
</div>
</div>
</th>
<th class="prismea-table--cell -width-200">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Cards</span></div>
<div class="prismea-vertical-spacing-5--slot">
<div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
</div>
</div>
</th>
<th class="prismea-table--cell -width-200">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Transfers</span></div>
<div class="prismea-vertical-spacing-5--slot">
<div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
</div>
</div>
</th>
<th class="prismea-table--cell -width-200">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Direct debits</span></div>
<div class="prismea-vertical-spacing-5--slot">
<div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="prismea-table--body">
<!-- Administrators (title)-->
<tr class="prismea-table--line -grey2">
<td class="prismea-table--cell">
<p class="prismea-text -text-bold prismea-color -color-grey5">Administrators</p>
</td>
<td class="prismea-table--cell -border-right"></td>
<td class="prismea-table--cell"></td>
<td class="prismea-table--cell"></td>
<td class="prismea-table--cell"></td>
</tr>
<!-- Administrators-->
<!-- Admin 1-->
<tr class="prismea-table--line -no-border -user">
<td class="prismea-table--cell -center">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Hugo Montero</span></div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Administrator</span></div>
</div>
</td>
<td class="prismea-table--cell -border-right">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
</tr>
<!-- Admin 2-->
<tr class="prismea-table--line -no-border -user">
<td class="prismea-table--cell -center">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Jon Slow</span></div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Co-Administrator</span></div>
</div>
</td>
<td class="prismea-table--cell -border-right">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
<input type="checkbox" checked="checked" onclick="return false;"/>
<label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
</tr>
<!-- Collaborators (title)-->
<tr class="prismea-table--line -grey2">
<td class="prismea-table--cell">
<p class="prismea-text -text-bold prismea-color -color-grey5">Collaborators</p>
</td>
<td class="prismea-table--cell -border-right"></td>
<td class="prismea-table--cell"></td>
<td class="prismea-table--cell"></td>
<td class="prismea-table--cell"></td>
</tr>
<!-- Collaborators-->
<!-- Collab 1-->
<tr class="prismea-table--line -no-border -user">
<td class="prismea-table--cell -center">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Alfred Grims</span></div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
</div>
</td>
<td class="prismea-table--cell -border-right">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="2324" checked="checked" onclick=""/>
<label for="2324"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="353" checked="checked" onclick=""/>
<label for="353"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="4634" onclick=""/>
<label for="4634"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="5443" onclick=""/>
<label for="5443"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
</tr>
<!-- Collab 2-->
<tr class="prismea-table--line -no-border -user">
<td class="prismea-table--cell -center">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>Shaun Morris</span></div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
</div>
</td>
<td class="prismea-table--cell -border-right">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="8686" checked="checked" onclick=""/>
<label for="8686"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="57" onclick=""/>
<label for="57"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="976" checked="checked" onclick=""/>
<label for="976"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="3246" onclick=""/>
<label for="3246"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
</tr>
<!-- Collab 2-->
<tr class="prismea-table--line -no-border -user">
<td class="prismea-table--cell -center">
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot"><span>William Nobody</span></div>
<div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
</div>
</td>
<td class="prismea-table--cell -border-right">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="908" onclick=""/>
<label for="908"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="956" onclick=""/>
<label for="956"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="46" onclick=""/>
<label for="46"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
<td class="prismea-table--cell">
<div class="prismea-checkbox" style="margin-bottom: 15px;">
<input type="checkbox" id="784" onclick=""/>
<label for="784"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
</label>
</div>
</td>
</tr>
</tbody>
</table>
table.table-authorizations
thead.prismea-table--head
tr.prismea-table--line
th
th.prismea-table--cell.-width-200.prismea-color.-color-grey5.-border-right Lecture
th.prismea-table--cell.-width-200.prismea-color.-color-grey5 Écriture
th
th
tr.prismea-table--line
th.prismea-table--cell.-width-300
th.prismea-table--cell.-width-200.-border-right
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Read movements
.prismea-vertical-spacing-5--slot
.prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
th.prismea-table--cell.-width-200
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Cards
.prismea-vertical-spacing-5--slot
.prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
th.prismea-table--cell.-width-200
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Transfers
.prismea-vertical-spacing-5--slot
.prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
th.prismea-table--cell.-width-200
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Direct debits
.prismea-vertical-spacing-5--slot
.prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
tbody.prismea-table--body
// Administrators (title)
tr.prismea-table--line.-grey2
td.prismea-table--cell
p.prismea-text.-text-bold.prismea-color.-color-grey5 Administrators
td.prismea-table--cell.-border-right
td.prismea-table--cell
td.prismea-table--cell
td.prismea-table--cell
// Administrators
// Admin 1
tr.prismea-table--line.-no-border.-user
td.prismea-table--cell.-center
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Hugo Montero
.prismea-vertical-spacing-5--slot
span.prismea-text.-text-xs Administrator
td.prismea-table--cell.-border-right
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
// Admin 2
tr.prismea-table--line.-no-border.-user
td.prismea-table--cell.-center
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Jon Slow
.prismea-vertical-spacing-5--slot
span.prismea-text.-text-xs Co-Administrator
td.prismea-table--cell.-border-right
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox.-disabled(style='margin-bottom: 15px;')
input(type='checkbox', checked, onclick='return false;')
label
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
// Collaborators (title)
tr.prismea-table--line.-grey2
td.prismea-table--cell
p.prismea-text.-text-bold.prismea-color.-color-grey5 Collaborators
td.prismea-table--cell.-border-right
td.prismea-table--cell
td.prismea-table--cell
td.prismea-table--cell
// Collaborators
// Collab 1
tr.prismea-table--line.-no-border.-user
td.prismea-table--cell.-center
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Alfred Grims
.prismea-vertical-spacing-5--slot
span.prismea-text.-text-xs Collaborator
td.prismea-table--cell.-border-right
.prismea-checkbox(style='margin-bottom: 15px;')
input#2324(type='checkbox', checked)
label(for='2324')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#353(type='checkbox', checked)
label(for='353')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#4634(type='checkbox')
label(for='4634')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#5443(type='checkbox')
label(for='5443')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
// Collab 2
tr.prismea-table--line.-no-border.-user
td.prismea-table--cell.-center
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span Shaun Morris
.prismea-vertical-spacing-5--slot
span.prismea-text.-text-xs Collaborator
td.prismea-table--cell.-border-right
.prismea-checkbox(style='margin-bottom: 15px;')
input#8686(type='checkbox', checked)
label(for='8686')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#57(type='checkbox')
label(for='57')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#976(type='checkbox', checked)
label(for='976')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#3246(type='checkbox')
label(for='3246')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
// Collab 2
tr.prismea-table--line.-no-border.-user
td.prismea-table--cell.-center
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot
span William Nobody
.prismea-vertical-spacing-5--slot
span.prismea-text.-text-xs Collaborator
td.prismea-table--cell.-border-right
.prismea-checkbox(style='margin-bottom: 15px;')
input#908(type='checkbox')
label(for='908')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#956(type='checkbox')
label(for='956')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#46(type='checkbox')
label(for='46')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
td.prismea-table--cell
.prismea-checkbox(style='margin-bottom: 15px;')
input#784(type='checkbox')
label(for='784')
i.prismea-icon.prismea-glyph-16_checkbox.-color-light
This table cell is located in the categories chart in the dashboard of the webapp
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category2--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category2--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category2--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
<div class="category-table-details">
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category2--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category2--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
</div>
</div>
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category2--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category2--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category2--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-details
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category2--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category2--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
This table is located in the dashboard of the webapp
<div class="prismea-categories-filters-table">
<div class="categories-filters-table-head">
<div class="categories-filters-table-cell -middle">
<p class="prismea-text -text-bold -uppercase">Catégories</p>
</div>
<div class="categories-filters-table-cell -justify-end">
<p class="prismea-text -text-bold -uppercase">12 derniers mois</p>
</div>
<div class="categories-filters-table-cell -justify-end">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-glyph-12_caret-down"></i></div>
<div class="prismea-horizontal-spacing-5--slot">
<p class="prismea-text -text-bold -uppercase">Nov. 2020</p>
</div>
</div>
</div>
</div>
<div class="categories-filters-table-body">
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category1--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category1--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category1--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
<div class="category-table-details">
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
</div>
</div>
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category1--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category1--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category1--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
<div class="category-table-details">
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
<div class="category-table-details-row">
<div></div>
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10">
<div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:category1--600;"></i></div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color -color-grey5">Category label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
</div>
</div>
</div>
</div>
<div class="category-table">
<div class="category-table-row">
<div class="category-table-cell">
<div class="prismea-horizontal-spacing-10 -middle">
<div class="prismea-horizontal-spacing-10--slot">
<div class="checkbox checkbox-color-category3--600">
<input type="checkbox"/>
<label>
<svg class="icon-32 icon-color-white">
<use href="/svg/32x32/line/validate-alt.svg#validate-alt-line-32"></use>
</svg>
</label>
</div>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<svg class="icon-24 icon-color-category3--600">
<use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
</svg>
</div>
<div class="prismea-horizontal-spacing-10--slot">
<p class="prismea-text prismea-color color-category3--600">Group of categories label</p>
</div>
</div>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="category-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
</div>
<div class="categories-filters-table-footer">
<div></div>
<div class="categories-filters-table-cell">
<p class="prismea-text -text-bold -uppercase">Total sorties</p>
</div>
<div class="categories-filters-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
<div class="categories-filters-table-cell -justify-end -middle">
<p class="prismea-numeral">8 647,00 €</p>
</div>
</div>
</div>
.prismea-categories-filters-table
.categories-filters-table-head
.categories-filters-table-cell.-middle
p.prismea-text.-text-bold.-uppercase Catégories
.categories-filters-table-cell.-justify-end
p.prismea-text.-text-bold.-uppercase 12 derniers mois
.categories-filters-table-cell.-justify-end
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-glyph-12_caret-down
.prismea-horizontal-spacing-5--slot
p.prismea-text.-text-bold.-uppercase Nov. 2020
.categories-filters-table-body
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category1--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category1--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category1--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-details
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category1--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category1--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category1--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-details
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-details-row
div
.category-table-cell
.prismea-horizontal-spacing-10
.prismea-horizontal-spacing-10--slot
i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:category1--600;')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.-color-grey5 Category label
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
.category-table
.category-table-row
.category-table-cell
.prismea-horizontal-spacing-10.-middle
.prismea-horizontal-spacing-10--slot
.checkbox.checkbox-color-category3--600
input(type='checkbox')
label
svg.icon-32.icon-color-white
use(href='/svg/32x32/line/validate-alt.svg#validate-alt-line-32')
.prismea-horizontal-spacing-10--slot
svg.icon-24.icon-color-category3--600
use(href='/svg/24x24/line/shop.svg#shop-line-24')
.prismea-horizontal-spacing-10--slot
p.prismea-text.prismea-color.color-category3--600 Group of categories label
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.category-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.categories-filters-table-footer
div
.categories-filters-table-cell
p.prismea-text.-text-bold.-uppercase Total sorties
.categories-filters-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
.categories-filters-table-cell.-justify-end.-middle
p.prismea-numeral 8 647,00 €
<div style="background-color: #effffd; display: flex; justify-content: center; padding: 10px">
<ul class="prismea-tabs">
<li class="prismea-tabs--slot"><a class="prismea-tab" href="#">Some tab</a>
</li>
<li class="prismea-tabs--slot"><a class="prismea-tab -selected" href="#">Some tab</a>
</li>
</ul>
</div>
div(style='background-color: #effffd; display: flex; justify-content: center; padding: 10px')
ul.prismea-tabs
li.prismea-tabs--slot
a.prismea-tab(href='#') Some tab
li.prismea-tabs--slot
a.prismea-tab.-selected(href='#') Some tab
<div class="prismea-vertical-spacing-10">
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-toast">
<div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
<div class="prismea-toast--header--title">Default</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">Nothing happening</div>
</div>
</div>
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-toast -warn">
<div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
<div class="prismea-toast--header--title">Warning</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">You have to be careful</div>
</div>
</div>
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-toast -error">
<div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
<div class="prismea-toast--header--title">Error</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">There is a terrible error</div>
</div>
</div>
</div>
.prismea-vertical-spacing-10
.prismea-vertical-spacing-10--slot
.prismea-toast
.prismea-toast--header
i.prismea-toast--header--icon.prismea-glyph-12_info
.prismea-toast--header--title Default
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content Nothing happening
.prismea-vertical-spacing-10--slot
.prismea-toast.-warn
.prismea-toast--header
i.prismea-toast--header--icon.prismea-glyph-12_info
.prismea-toast--header--title Warning
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content You have to be careful
.prismea-vertical-spacing-10--slot
.prismea-toast.-error
.prismea-toast--header
i.prismea-toast--header--icon.prismea-glyph-12_info
.prismea-toast--header--title Error
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content There is a terrible error
<h3>Default view</h3>
<div class="prismea-toolbar-wrapper">
<div class="prismea-toolbar">
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea Main Account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<ul class="prismea-toolbar--account-list">
<li class="prismea-select--option -disabled">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea main account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
</div>
</li>
<li class="prismea-select--option">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea secondary account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+430€</div>
</div>
</div>
</li>
</ul>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
</div>
</div>
</div>
</div>
</div>
<h3>First tab is disabled (hover me)</h3>
<div class="prismea-toolbar-wrapper">
<div class="prismea-toolbar">
<div class="prismea-toolbar--tab-wrapper -disabled">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea Main Account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<ul class="prismea-toolbar--account-list">
<li class="prismea-select--option -disabled">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea main account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
</div>
</li>
<li class="prismea-select--option">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea secondary account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+430€</div>
</div>
</div>
</li>
</ul>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
</div>
</div>
</div>
</div>
</div>
<h3>Filters are visible</h3>
<div class="prismea-toolbar-wrapper">
<div class="prismea-toolbar -open">
<div class="prismea-toolbar--tab-wrapper -expanded">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea Main Account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<ul class="prismea-toolbar--account-list">
<li class="prismea-select--option -disabled">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea main account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
</div>
</li>
<li class="prismea-select--option">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea secondary account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+430€</div>
</div>
</div>
</li>
</ul>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar-filters">
<div class="prismea-toolbar-filters--pill-wrapper">
<div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 1</span>
</div>
<div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 2</span>
</div>
<div class="prismea-toolbar-filters--pill -selected"><i class="prismea-icon prismea-glyph-12_delete"></i><span>Label 3 (selected)</span>
</div>
<div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 4</span>
</div>
<div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 5</span>
</div>
<div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 6</span>
</div>
</div>
</div>
</div>
<h3>Hidden dropdown is visible</h3>
<div class="prismea-toolbar-wrapper">
<div class="prismea-toolbar">
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
</div>
<div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector -expanded">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea Main Account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
</div>
</div>
</div>
<ul class="prismea-toolbar--account-list">
<li class="prismea-select--option -disabled">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea main account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+1 400€</div>
</div>
</div>
</li>
<li class="prismea-select--option">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-text">Prismea secondary account</div>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand">
<div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
</div>
<div class="prismea-horizontal-spacing-5--slot">
<div class="prismea-numeral">+430€</div>
</div>
</div>
</li>
</ul>
</div>
<div class="prismea-toolbar--tab-wrapper">
<div class="prismea-toolbar--tab">
<div class="prismea-horizontal-spacing-5 -middle">
<div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
</div>
<div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
</div>
</div>
</div>
</div>
</div>
h3 Default view
.prismea-toolbar-wrapper
.prismea-toolbar
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_period
.prismea-horizontal-spacing-5--slot.-expand
span Period
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_settings
.prismea-horizontal-spacing-5--slot.-expand.-min
span Advanced search
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea Main Account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
ul.prismea-toolbar--account-list
li.prismea-select--option.-disabled
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea main account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
li.prismea-select--option
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea secondary account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
.prismea-horizontal-spacing-5--slot
.prismea-numeral +430€
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_export
.prismea-horizontal-spacing-5--slot.-expand.-min
span Export
h3 First tab is disabled (hover me)
.prismea-toolbar-wrapper
.prismea-toolbar
.prismea-toolbar--tab-wrapper.-disabled
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_period
.prismea-horizontal-spacing-5--slot.-expand
span Period
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_settings
.prismea-horizontal-spacing-5--slot.-expand.-min
span Advanced search
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea Main Account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
ul.prismea-toolbar--account-list
li.prismea-select--option.-disabled
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea main account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
li.prismea-select--option
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea secondary account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
.prismea-horizontal-spacing-5--slot
.prismea-numeral +430€
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_export
.prismea-horizontal-spacing-5--slot.-expand.-min
span Export
h3 Filters are visible
.prismea-toolbar-wrapper
.prismea-toolbar.-open
.prismea-toolbar--tab-wrapper.-expanded
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_period
.prismea-horizontal-spacing-5--slot.-expand
span Period
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_settings
.prismea-horizontal-spacing-5--slot.-expand.-min
span Advanced search
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea Main Account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
ul.prismea-toolbar--account-list
li.prismea-select--option.-disabled
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea main account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
li.prismea-select--option
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea secondary account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
.prismea-horizontal-spacing-5--slot
.prismea-numeral +430€
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_export
.prismea-horizontal-spacing-5--slot.-expand.-min
span Export
.prismea-toolbar-filters
.prismea-toolbar-filters--pill-wrapper
.prismea-toolbar-filters--pill
i.prismea-icon.prismea-glyph-12_plus
span Label 1
.prismea-toolbar-filters--pill
i.prismea-icon.prismea-glyph-12_plus
span Label 2
.prismea-toolbar-filters--pill.-selected
i.prismea-icon.prismea-glyph-12_delete
span Label 3 (selected)
.prismea-toolbar-filters--pill
i.prismea-icon.prismea-glyph-12_plus
span Label 4
.prismea-toolbar-filters--pill
i.prismea-icon.prismea-glyph-12_plus
span Label 5
.prismea-toolbar-filters--pill
i.prismea-icon.prismea-glyph-12_plus
span Label 6
h3 Hidden dropdown is visible
.prismea-toolbar-wrapper
.prismea-toolbar
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_period
.prismea-horizontal-spacing-5--slot.-expand
span Period
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_settings
.prismea-horizontal-spacing-5--slot.-expand.-min
span Advanced search
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
.prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector.-expanded
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea Main Account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-12_caret-down
ul.prismea-toolbar--account-list
li.prismea-select--option.-disabled
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea main account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
.prismea-horizontal-spacing-5--slot
.prismea-numeral +1 400€
li.prismea-select--option
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_operations
.prismea-horizontal-spacing-5--slot
.prismea-text Prismea secondary account
.prismea-horizontal-spacing-5--slot.-expand
.prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
.prismea-horizontal-spacing-5--slot
.prismea-numeral +430€
.prismea-toolbar--tab-wrapper
.prismea-toolbar--tab
.prismea-horizontal-spacing-5.-middle
.prismea-horizontal-spacing-5--slot
i.prismea-icon.prismea-glyph-16_export
.prismea-horizontal-spacing-5--slot.-expand.-min
span Export