Skip to content
Primer/ViewComponents
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

On this page

Blankslate

Use blank slate when there is a lack of content within a page or section.
  • Beta
  • Not reviewed for accessibility
On this page

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
narrowBooleanfalseAdds a maximum width of 485px to the Blankslate.
spaciousBooleanfalseIncreases the padding from 32px to 80px 40px.
borderBooleanfalseAdds a border around the Blankslate.
system_argumentsHashN/ASystem arguments

Slots

visual

Optional visual.

Use:

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

heading

Required heading.

NameTypeDefaultDescription
tagStringN/AOne of :h1, :h2, :h3, :h4, :h5, or :h6.
system_argumentsHashN/ASystem arguments

description

Optional description.

  • The description should always be informative and actionable.
  • Don't use phrases like "You can".
NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

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
hrefStringN/AURL to be used for the primary action.
system_argumentsHashN/ASystem arguments

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
hrefStringN/AURL to be used for the secondary action.
system_argumentsHashN/ASystem arguments

Examples

Basic

Title

Description

<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description { "Description"} %>
<% end %>

Icon

Add an icon to give additional context. Refer to the Octicons documentation to choose an icon.

Title

Description

<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_icon(icon: :globe) %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description { "Description"} %>
<% end %>

Loading

Add a SpinnerComponent to the blankslate in place of an icon.

Title

Description

<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_spinner(size: :large) %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description { "Description"} %>
<% end %>

Using an image

Add an image to give context that an Octicon couldn't.

Security - secure vault

Title

Description

<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description { "Description"} %>
<% end %>

Custom content

Pass custom content to description.

Title

Your custom content here

<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description do %>
    <em>Your custom content here</em>
  <% end %>
<% end %>

Primary action

Provide a primary_action to guide users to take action from the blankslate. The primary_action appears below the description and custom content.

Welcome to the mona wiki!

Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.

Create the first page 
<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_icon(icon: :book) %>
  <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
  <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
  <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
<% end %>

Secondary action

Add an additional secondary_action to help users learn more about a feature. See Accessibility. secondary_action will be shown at the very bottom:

Welcome to the mona wiki!

Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.

Learn more about wikis 
<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_icon(icon: :book) %>
  <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
  <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
  <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
<% end %>

Primary and secondary actions

primary_action and secondary_action can also be used together. The primary_action will always be rendered before the secondary_action:

Welcome to the mona wiki!

Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.

Create the first page
Learn more about wikis 
<%= render Primer::Beta::Blankslate.new do |component| %>
  <% component.with_visual_icon(icon: :book) %>
  <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
  <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
  <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
  <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
<% end %>

Variations

There are a few variations of how the Blankslate appears: narrow adds a maximum width of 485px, and spacious increases the padding from 32px to 80px 40px.

Welcome to the mona wiki!

Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.

<%= render Primer::Beta::Blankslate.new(
  narrow: true,
  spacious: true,
) do |component| %>
  <% component.with_visual_icon(icon: :book) %>
  <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
  <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
<% end %>

With border

It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.

Welcome to the mona wiki!

Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.

<%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
  <% component.with_visual_icon(icon: :book) %>
  <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
  <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
<% end %>