# Empty > What a list, a table, a search or a page shows when there is nothing to show yet. Source: https://shadleaf.dev/current/components/empty/ **Example: Empty.** ```html

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Create project

Learn more ``` ## Built from parts An empty state is `` plus the parts you need: `` (holding ``, `` and ``) and `` for what to do next, such as a button, a search field or a link. Everything is centred, and the empty state grows to fill a flex container, so it sits in the middle of the space it is given. `` puts an icon on a muted square. The default media shows its content as it is, for an avatar or an image. **Example: With an avatar.** The default media shows its content as it is. ```html

User offline

This user is currently offline. You can leave a message to notify them or try again later.

Leave message

``` ## A title that is a heading `` is plain text unless you give it a `level`. With one, it is announced as a heading of that level. Pick the level that fits the page: an empty state under an `

` gets `level="3"`. ## Outline `border` draws a dashed line around the empty state, to mark out the area. It works without utility classes, so also with the standalone stylesheet. Example: Outline. border draws a dashed line around the empty state. ```html Cloud storage is empty Upload files to your cloud storage to access them anywhere. Upload files ``` ## In a card Example: In a card. ```html Projects Everything your team is working on No projects yet Create a project to start working with your team. Create project ``` ## In an empty table Put the empty state in [``](https://shadleaf.dev/current/components/table.md), which spans every column: it replaces the row's "No results." text. Example: In an empty table. An sl:empty as the content of sl:table-empty replaces its "No results." text. ```html Name Email Role Ada Lovelace ada@example.com Owner No people yet Invite your team to collaborate on this project. Invite people ``` ## With a search field A link in a description is underlined. An `` can also go in the content, below the field. Example: With a search field. Links in the description are underlined. ```html 404 - Not found The page you're looking for doesn't exist. Try searching for what you need below.

Need help? Contact support ``` ## While it loads An [``](https://shadleaf.dev/current/components/spinner.md) takes the icon's place in the media while something loads. Example: With a spinner. While something loads, an sl:spinner takes the icon's place. ```html Processing your request Please wait while we process your request. Do not refresh the page. Cancel ``` ## Attributes ### sl:empty Attributes of ``: An empty state: what a list, a table, a search or a page shows when there is nothing to show yet. Holds an `sl:empty-header` (media, title and description) and an optional `sl:empty-content` with what to do next, centred in the space it is given. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `border` | boolean | — | A dashed line around the empty state, to mark out the area. | Every prop can also be set from an expression: `th:border="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:empty-header Attributes of ``: The top of an `sl:empty`: an optional `sl:empty-media`, an `sl:empty-title` and an `sl:empty-description`, stacked and centred. `sl:empty-header` declares no props; every attribute passes through. ### sl:empty-media Attributes of ``: An icon, an avatar or an image above the title of an `sl:empty`, inside `sl:empty-header`. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `variant` | `default`, `icon` | `default` | `icon` puts an icon on a muted square; `default` shows the content as it is, e.g. an avatar. | Every prop can also be set from an expression: `th:variant="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:empty-title Attributes of ``: The title of an `sl:empty`, inside `sl:empty-header`. | Attribute | Values | Default | Description | | --- | --- | --- | --- | | `level` | `1`, `2`, `3`, `4`, `5`, `6` | — | Heading level. With it the title is a heading (`role="heading"` and `aria-level`) that screen reader users can jump to; without it, plain text. Pick the level that fits the page's outline. | Every prop can also be set from an expression: `th:level="${...}"`. Any other attribute passes through to the rendered element, and `class` is appended. ### sl:empty-description Attributes of ``: The text below the title of an `sl:empty`. Links in it are underlined. `sl:empty-description` declares no props; every attribute passes through. ### sl:empty-content Attributes of ``: What to do next in an `sl:empty`, below its header: a button, a search field, a link. `sl:empty-content` declares no props; every attribute passes through.