Blankslate

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

v0.5.1BetaNot 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.

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

View in Lookbook

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