Blankslate

A sl-blankslate component is a placeholder element that should be displayed when there is nothing else to be shown.

Nothing to see here...

<sl-blankslate>
  <span>Nothing to see here...</span>
</sl-blankslate>

Slots

The component includes multiple slots to cover various layouts.

Playground

<sl-blankslate>
  <span slot="graphic">Graphic</span>
  <span slot="heading">Heading</span>
  <span>Nothing to see here...</span>
  <span slot="actions">Actions</span>
</sl-blankslate>

Attributes

Heading

Modifies the heading element, defaults to h3, helps with SEO.

I'm an h1
I'm an h2
I'm an h3
I'm an h4
I'm an h5
I'm an h6

<sl-blankslate heading="h1">...</sl-blankslate>
<sl-blankslate heading="h2">...</sl-blankslate>
<sl-blankslate heading="h3">...</sl-blankslate>
<sl-blankslate heading="h4">...</sl-blankslate>
<sl-blankslate heading="h5">...</sl-blankslate>
<sl-blankslate heading="h6">...</sl-blankslate>