Empty state

data-empty is the slot that holds nothing yet: a heading, a line that says what would appear here, and at most one action.

Basic

<div data-empty>
  <h3>No broken links yet</h3>
  <p>When a page points at something that is not there, it shows up here with the page that linked it.</p>
  <menu><li><button data-variant="line" data-size="sm">Read about links</button></li></menu>
</div>

Say what will fill the slot, not that it is empty; the heading already says that.

Notes

• The slot is a dashed outline in --s72-line, so an empty space still has a shape.
• The text takes --s72-fg-2 and the heading takes the full ink, so the heading leads.
• Everything inside is centred, which is the one place in s72 where text is.