Blankslate

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

Slots

visual

Optional visual.

Use:

• visual_icon for an Primer::Beta::Octicon.
• visual_image for an Primer::Alpha::Image.
• visual_spinner for a Primer::Beta::Spinner.

heading

Required heading.

description

Optional description.

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

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.

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