Blankslate

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

v0.34.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

NameTypeDefaultDescription
narrow
Boolean

false

Adds a maximum width of 485px to the Blankslate.

spacious
Boolean

false

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

border
Boolean

false

Adds a border around the Blankslate.

system_arguments
Hash

N/A

Examples

Slots

visual

Optional visual.

Use:

NameTypeDefaultDescription
system_arguments
Hash

N/A

heading

Required heading.

NameTypeDefaultDescription
tag
String

N/A

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

system_arguments
Hash

N/A

description

Optional description.

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

N/A

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.

NameTypeDefaultDescription
href
String

N/A

URL to be used for the primary action.

system_arguments
Hash

N/A

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).

NameTypeDefaultDescription
href
String

N/A

URL to be used for the secondary action.

system_arguments
Hash

N/A