COMPONENTS

Empty states

One empty-state class centres ordinary content with readable spacing. Your application decides when the collection is empty; CSS only arranges the message.

Usage

Markup: .empty-state

Behaviour: Applications determine when there are no results.

Explain what is missing and the next useful action. Keep headings at the appropriate document level and use native links for navigation.
An empty state is content, not automatically an alert. For application-updated results, choose an appropriate established announcement region only when needed.
Spacing follows density, text follows the theme, and native actions keep their inherited styling. Combine with card when a surface is useful; card can receive optional glass material.

Component API and styling module · Inherited appearance settings

No records yet

A heading and explanation are enough when there is no meaningful action to offer.

No records yet

Your records will appear here after you add them.

<section class="empty-state" aria-labelledby="empty-records-heading">
  <h3 id="empty-records-heading">No records yet</h3>
  <p>Your records will appear here after you add them.</p>
</section>

A useful next step

Combine existing card and button styles with the empty-state layout.

Start your first project

Explore the guide to choose your page defaults and components.

Read the guide

<section class="card empty-state" aria-labelledby="empty-start-heading">
  <h3 id="empty-start-heading">Start your first project</h3>
  <p>Explore the guide to choose your page defaults and components.</p>
  <a class="button" href="/RevaCSS/guide/">Read the guide</a>
</section>

No chart data

Reuse the existing empty-state instead of drawing a misleading empty or zero chart.

No revenue data yet

The chart will appear after a reporting period is available.

<section class="empty-state" aria-labelledby="empty-chart-title"><h3 id="empty-chart-title">No revenue data yet</h3><p>The chart will appear after a reporting period is available.</p></section>

Unavailable metric

Missing values are distinct from a measured zero.

Forecast revenue: Unavailable; No forecast has been supplied.

<article class="card"><dl><dt>Forecast revenue</dt><dd><output>Unavailable</output></dd><dd><small>No forecast has been supplied.</small></dd></dl></article>