Item

Name: Skeletonic
Author: Sebastien Rousseau

A list row: media, text, and a trailing value.

Source: src/stylus/components/item.styl

Default

The pattern .command-item and the dropdown entries are special cases of, exposed on its own so a settings row or a search result need not borrow a menu class to get the same rhythm.

SR Sebastien Rousseau Lead maintainer Owner

<div class="item-group">
  <div class="item">
    <span class="item-media"><span class="avatar sm"><span class="avatar-fallback">SR</span></span></span>
    <span class="item-content">
      <span class="item-title">Sebastien Rousseau</span>
      <span class="item-description">Lead maintainer</span>
    </span>
    <span class="item-trailing">Owner</span>
  </div>
</div>

Interactive

Add .item-interactive when the row is a control rather than a record.

<button type="button" class="item item-interactive">
  <span class="item-content">
    <span class="item-title">Appearance</span>
    <span class="item-description">Theme, density and motion</span>
  </span>
  <span class="item-trailing">&rsaquo;</span>
</button>