Display

Card, panel and tile

The three surface layers: shell, panel and tile. Depth comes from them, not from shadow.

CSS only

Example

Recurring revenue

$48,300 this month

+14.8%

1,240 active accounts

Monthly summary

Shell, panel and tile, no shadow.

<article class="u-card">
  <div class="u-panel">
    <div class="u-head">
      <div>
        <div class="u-label">Recurring revenue</div>
        <div class="u-big">$48,300 <small>this month</small></div>
      </div>
      <span class="u-badge u-badge--delta">+14.8%</span>
    </div>
    <div class="u-tile"><b class="u-num">1,240</b> <span class="u-label">active accounts</span></div>
  </div>
  <div class="u-card__foot">
    <h3 class="u-card__title">Monthly summary</h3>
    <p class="u-card__desc">Shell, panel and tile, no shadow.</p>
  </div>
</article>

Installation

Card, panel and tile ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`u-card`	Shell: --card, --line border, radius 28, padding 12.
`u-panel`	Panel: --panel, radius 16. 28 = 16 + 12, so the curves stay parallel.
`u-tile`	Tile: --tile, radius 14, inside the panel.
`u-head`	Header row: text on the left, control on the right.
`u-label`	Small label in --`fg-2`.
`u-big`	Big number, with tabular figures. A small inside it becomes the unit.
`u-num`	Tabular figures only, without changing the size.
`u-card__foot, u-card__title, u-card__desc`	Title and description outside the panel.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
article	element	Use article when the card makes sense on its own; div everywhere else.