Blankslate

Blankslate is used as placeholder to tell users why content is missing.

v0.24.0BetaNot reviewed for accessibility

Description

Use Blankslate when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.

Accessibility

  • The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
  • All blankslate visuals have been programmed as decorative images, using aria-hidden=”true” and img alt=””, which will hide the visual from screen reader users.
  • The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
  • secondary_action text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
  • The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.

Arguments

NameDefaultDescription
narrow

false

Boolean

Adds a maximum width of 485px to the Blankslate.

spacious

false

Boolean

Increases the padding from 32px to 80px 40px.

border

false

Boolean

Adds a border around the Blankslate.

system_arguments

N/A

Hash

Examples

Slots

visual

Optional visual.

Use:

NameDefaultDescription
system_arguments

N/A

Hash

heading

Required heading.

NameDefaultDescription
tag

N/A

String

One of :h1, :h2, :h3, :h4, :h5, or :h6.

system_arguments

N/A

Hash

description

Optional description.

  • The description should always be informative and actionable.
  • Don't use phrases like "You can".
NameDefaultDescription
system_arguments

N/A

Hash

primary_action

Optional primary action

The primary_action slot renders an anchor link which is visually styled as a button to provide more emphasis to the Blankslate's primary action.

NameDefaultDescription
href

N/A

String

URL to be used for the primary action.

system_arguments

N/A

Hash

secondary_action

Optional secondary action

The secondary_action slot renders a normal anchor link, which can be used to redirect the user to additional information (e.g. Help documentation).

NameDefaultDescription
href

N/A

String

URL to be used for the secondary action.

system_arguments

N/A

Hash