Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.
<div class="prismea-filtered-area">
<div class="prismea-filtered-area--filter">
<div class="prismea-vertical-spacing-30">
<div class="prismea-vertical-spacing-30--slot">
<div class="prismea-vertical-spacing-10">
<div class="prismea-vertical-spacing-10--slot">
<h1 class="prismea-title-3">Filters</h1>
</div>
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-field">
<div class="prismea-field--slot">
<label class="prismea-label">Label</label>
</div>
<div class="prismea-field--slot">
<input class="prismea-input-text " type="text" placeholder="Mighty text"/>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-field">
<div class="prismea-field--slot">
<label class="prismea-label">Label</label>
</div>
<div class="prismea-field--slot">
<input class="prismea-input-text " type="text" placeholder="Mighty text"/>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-10--slot">
<div class="prismea-field">
<div class="prismea-field--slot">
<label class="prismea-label">Label</label>
</div>
<div class="prismea-field--slot">
<div class="prismea-select">
<div class="prismea-select--field">
<div class="prismea-select--input">
<div class="prismea-select--label"><span>Selected option</span></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">-- Select an option --</li>
<li class="prismea-select--option -selected">Selected Option</li>
<li class="prismea-select--option -disabled">Disabled Option</li>
<li class="prismea-select--option">Third</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-30--slot">
<button class="prismea-button -block ">Button
</button>
</div>
</div>
</div>
<div class="prismea-filtered-area--line"></div>
<div class="prismea-filtered-area--content">
<div class="prismea-vertical-spacing-30">
<div class="prismea-vertical-spacing-30--slot">
<table class="prismea-table-log -text-sm">
<tbody>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -positive">POST
</div>
<div class="prismea-badge -block">404
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_warning -color-warning"></i>
</td>
</tr>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -classic">GET
</div>
<div class="prismea-badge -block">500
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_error -color-negative"></i>
</td>
</tr>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -neutral">PUT
</div>
<div class="prismea-badge -block">200
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"></td>
</tr>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -special">PATCH
</div>
<div class="prismea-badge -block">200
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"></td>
</tr>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -negative">DELETE
</div>
<div class="prismea-badge -block">200
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms) <span class="prismea-log-line--date--icon"><i class="prismea-icon prismea-glyph-12_pending"></i></span>
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"></td>
</tr>
<tr class="prismea-table-log--line ion--hoverable">
<td class="prismea-table-log--line--slot -width-50">
<div class="prismea-badge -block -classic-light">OPTIONS
</div>
<div class="prismea-badge -block">200
</div>
</td>
<td class="prismea-table-log--line--slot -expand">
<div class="prismea-log-line">
<div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
<div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
</div>
</div>
</td>
<td class="prismea-table-log--line--slot -width-25 -right"></td>
</tr>
</tbody>
</table>
</div>
<div class="prismea-vertical-spacing-30--slot">
<div class="prismea-pagination">
<button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-left"></i></button>
<div class="prismea-pagination--page">Page 1/42</div>
<button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>.prismea-filtered-area
.prismea-filtered-area--filter
.prismea-vertical-spacing-30
.prismea-vertical-spacing-30--slot
.prismea-vertical-spacing-10
.prismea-vertical-spacing-10--slot
h1.prismea-title-3 Filters
.prismea-vertical-spacing-10--slot
.prismea-field
.prismea-field--slot
label.prismea-label Label
.prismea-field--slot
input.prismea-input-text(type='text', placeholder='Mighty text')
.prismea-vertical-spacing-10--slot
.prismea-field
.prismea-field--slot
label.prismea-label Label
.prismea-field--slot
input.prismea-input-text(type='text', placeholder='Mighty text')
.prismea-vertical-spacing-10--slot
.prismea-field
.prismea-field--slot
label.prismea-label Label
.prismea-field--slot
.prismea-select
.prismea-select--field
.prismea-select--input
.prismea-select--label
span Selected option
.prismea-select--caret
i.prismea-glyph-12_caret-down
ul.prismea-select--options
li.prismea-select--option -- Select an option --
li.prismea-select--option.-selected Selected Option
li.prismea-select--option.-disabled Disabled Option
li.prismea-select--option Third
.prismea-vertical-spacing-30--slot
button.prismea-button.-block.
Button
.prismea-filtered-area--line
.prismea-filtered-area--content
.prismea-vertical-spacing-30
.prismea-vertical-spacing-30--slot
table.prismea-table-log.-text-sm
tbody
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-positive.
POST
.prismea-badge.-block.
404
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date.
21 / 12 / 2019 - 09:38 (654ms)
td.prismea-table-log--line--slot.-width-25.-right
i.prismea-icon.-x1.prismea-glyph-16_warning.-color-warning
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-classic.
GET
.prismea-badge.-block.
500
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date.
21 / 12 / 2019 - 09:38 (654ms)
td.prismea-table-log--line--slot.-width-25.-right
i.prismea-icon.-x1.prismea-glyph-16_error.-color-negative
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-neutral.
PUT
.prismea-badge.-block.
200
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date.
21 / 12 / 2019 - 09:38 (654ms)
td.prismea-table-log--line--slot.-width-25.-right
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-special.
PATCH
.prismea-badge.-block.
200
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date.
21 / 12 / 2019 - 09:38 (654ms)
td.prismea-table-log--line--slot.-width-25.-right
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-negative.
DELETE
.prismea-badge.-block.
200
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date
| 21 / 12 / 2019 - 09:38 (654ms)
span.prismea-log-line--date--icon
i.prismea-icon.prismea-glyph-12_pending
td.prismea-table-log--line--slot.-width-25.-right
tr.prismea-table-log--line.ion--hoverable
td.prismea-table-log--line--slot.-width-50
.prismea-badge.-block.-classic-light.
OPTIONS
.prismea-badge.-block.
200
td.prismea-table-log--line--slot.-expand
.prismea-log-line
.prismea-log-line--uri /api/v1/path/to/a/specific/resource
.prismea-log-line--date.
21 / 12 / 2019 - 09:38 (654ms)
td.prismea-table-log--line--slot.-width-25.-right
.prismea-vertical-spacing-30--slot
.prismea-pagination
button.prismea-pagination--button(disabled)
i.prismea-glyph-12_arrow-left
.prismea-pagination--page Page 1/42
button.prismea-pagination--button
i.prismea-glyph-12_arrow-right