EmptyState - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a <section> tag, with the z-empty-state HTML custom attribute.

z-empty-state ​

The z-empty-state attribute is the main attribute used to render the empty state CSS component.

Inside the <section> tag, you can add the following elements:

  • title - The header of the empty state using the <h3> tag.
  • description - The content of the empty state.
  • button - The button to add an action to the empty state.

Empty state header

Empty state content

Also you can add an illustration or a pictogram. Using the image component or the pictogram component respectively.

Empty state header

Empty state content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.1/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/Pictogram.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.5.1/@zurich/css-components/EmptyState.css" />
Code
html
<section z-empty-state>
  <div z-pictogram="digital-lock">
  </div>
  <main>
    <h3>Access forbidden</h3>
    <p>
      Access to this page is restricted. Please contact your administrator.
    </p>
    <button z-button>
      Contact administrator
    </button>
  </main>
</section>