Skip to content

IrisComponentsState-Complete Card

State-Complete Card

One card carried through all six states most designs skip.

State-Complete Card

A search-result card shown in default, loading, empty, error, disabled and long-content states — each one designed rather than left to fall out of the default. The loading state reserves its own height, the empty state says what to do, the error state names the failure and offers the way out, and the long state truncates predictably instead of breaking the row.

Responsive behaviour is driven by container queries, not the viewport, so it reflows correctly wherever it is placed.

  • states
  • container-queries
  • a11y
Status
In progress
Licence
Free

Install

Usage

This piece hasn’t been extracted into standalone code yet.

Component

Check back once status flips to “Available.”

More components

Start with a background.

The backgrounds are the most finished corner of the catalogue. Take one and drop it under your own copy.

Browse backgrounds