Empty

A structured empty state with explanation and a next action. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• empty, empty-header, empty-media, empty-title, empty-description, empty-content

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<section class="empty" aria-labelledby="empty-title">
  <div class="empty-header">
    <h2 id="empty-title" class="empty-title">No projects yet</h2>
    <p class="empty-description">Create a project to get started.</p>
  </div>
  <div class="empty-content"><a class="btn" href="/new">Create project</a></div>
</section>

Variants and composition

empty-header, media, title, description, and content can be composed as needed. No named tone or size modifier is supplied.

Behavior and accessibility

Provide a useful next action when recovery is possible. Use a heading level appropriate to the surrounding page; media is optional and should not repeat the text name.

Reference

See the interactive Storybook specimen ↗. Continue to Floating action button or return to the Official preset overview.