Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost

Filtered area

<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