Item – Tsunami

Usage

Use article.item for information, or a.item when the whole row is a link. Every part except section is optional.

Standard shipping

Delivered in 3 to 5 business days.

<article class="item" data-variant="outline">
  <section>
    <h3>Standard shipping</h3>
    <p>Delivered in 3 to 5 business days.</p>
  </section>
  <aside>
    <button type="button" class="btn" data-size="sm">Edit</button>
  </aside>
</article>

Status variants: ok, warning, info and danger

A soft fill in the status color. The icon in the figure uses the strong status color.

Payment captured

Charged $38.00 to the card ending in 4417.

Low stock

Only 3 Timeless Watches left.

Order on hold

Waiting for the customer to confirm the address.

Payment failed

The card was declined.

<div class="item-group">
  <article class="item" data-variant="ok">
    <figure><i class="icon icon-circle-check" aria-hidden="true"></i></figure>
    <section>
      <h3>Payment captured</h3>
      <p>Charged $38.00 to the card ending in 4417.</p>
    </section>
  </article>
  <article class="item" data-variant="warning">
    <figure><i class="icon icon-triangle-alert" aria-hidden="true"></i></figure>
    <section>
      <h3>Low stock</h3>
      <p>Only 3 Timeless Watches left.</p>
    </section>
    <aside>
      <button type="button" class="btn" data-size="sm">Restock</button>
    </aside>
  </article>
  <article class="item" data-variant="info">
    <figure><i class="icon icon-info" aria-hidden="true"></i></figure>
    <section>
      <h3>Order on hold</h3>
      <p>Waiting for the customer to confirm the address.</p>
    </section>
  </article>
  <article class="item" data-variant="danger">
    <figure><i class="icon icon-circle-alert" aria-hidden="true"></i></figure>
    <section>
      <h3>Payment failed</h3>
      <p>The card was declined.</p>
    </section>
  </article>
</div>

Default, outline and muted

Default

No border and no fill.

Outline

A border around the item.

Muted

A soft fill and no border.

<div class="item-group">
  <article class="item">
    <section>
      <h3>Default</h3>
      <p>No border and no fill.</p>
    </section>
  </article>
  <article class="item" data-variant="outline">
    <section>
      <h3>Outline</h3>
      <p>A border around the item.</p>
    </section>
  </article>
  <article class="item" data-variant="muted">
    <section>
      <h3>Muted</h3>
      <p>A soft fill and no border.</p>
    </section>
  </article>
</div>

Sizes: default, sm and xs

xs puts the title and description on one line. Good for dense lists.

Emma Wilson

12 orders

Olivia Brown

4 orders

James Carter

1 order

<div class="item-group">
  <article class="item" data-variant="outline">
    <figure><span class="avatar">EW</span></figure>
    <section>
      <h3>Emma Wilson</h3>
      <p>12 orders</p>
    </section>
  </article>
  <article class="item" data-variant="outline" data-size="sm">
    <figure><span class="avatar" data-size="sm">OB</span></figure>
    <section>
      <h3>Olivia Brown</h3>
      <p>4 orders</p>
    </section>
  </article>
  <article class="item" data-variant="outline" data-size="xs">
    <figure><span class="avatar" data-size="sm">JC</span></figure>
    <section>
      <h3>James Carter</h3>
      <p>1 order</p>
    </section>
  </article>
</div>

A list of links with lines between them

Put an hr between items in a group. The lines then provide the spacing.

<nav class="item-group" aria-label="To do">
  <a href="#" class="item">
    <figure><i class="icon icon-truck" aria-hidden="true"></i></figure>
    <section><h3>6 unfulfilled orders to ship</h3></section>
    <aside><i class="icon icon-chevron-right" aria-hidden="true"></i></aside>
  </a>
  <hr />
  <a href="#" class="item">
    <figure><i class="icon icon-shopping-bag" aria-hidden="true"></i></figure>
    <section><h3>2 orders on hold</h3></section>
    <aside><i class="icon icon-chevron-right" aria-hidden="true"></i></aside>
  </a>
  <hr />
  <a href="#" class="item">
    <figure><i class="icon icon-circle-alert" aria-hidden="true"></i></figure>
    <section><h3>1 low stock alert needs review</h3></section>
    <aside><i class="icon icon-chevron-right" aria-hidden="true"></i></aside>
  </a>
</nav>

Attributes

Attribute / element	Values	Description
`.item`	`article`, `a`, `div`	One flex row: figure, section, aside; `a.item` gets a gray fill on hover
`> figure`		32px box for an icon; an `img` inside fills it as a circle; an `.avatar` keeps its own size (use `data-size="sm"` with sm/xs items)
`> section`		Text. Fills the remaining space
`section h3`		Title, 14px, weight 500
`section p`		Description, 12px, gray
`> aside`		Buttons, icons or trailing info. Gray, does not shrink
`data-variant`	omit for normal (default), `outline`, `muted`, `ok`, `warning`, `info`, `danger`	outline adds a border on white, muted adds a gray fill, statuses use a soft fill and a status-colored icon
`data-size`	omit for normal (default), `sm`, `xs`	sm: 24px padding and figure; xs: 20px figure, title and description on one line
`.item-group`	`div`, `nav`, `ul`	Groups items, 4px apart
`.item-group > hr`		Divider between items (a group with hr has no gap)