import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

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

Arguments

Slots

Icon

Optional visual that renders an HeroiconComponent.

Image

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

Examples

Basic

<%= render Ariadne::BlankslateComponent.new do |c| %>
  <% c.heading(tag: :h2) { "heading" } %>
  <% c.description { "Description"} %>
<% end %>

<%= render Ariadne::BlankslateComponent.new do |c| %>
  <% c.icon(icon: :"globe-europe-africa") %>
  <% c.heading(tag: :h2) { "heading" } %>
  <% c.description { "Description"} %>
<% end %>

<%= render Ariadne::BlankslateComponent.new do |c| %>
  <% c.image(src: "https://github.githubassets.com/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
  <% c.heading(tag: :h2){ "heading" } %>
<% end %>