Skip to content

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

  • Set the heading level based on what is appropriate for your page hierarchy. Learn more about best heading practices (WAI Headings)
  • secondary_action can be set to provide more information that is relevant in the context of the Blankslate.
  • 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

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 |c| %>
<% c.heading(tag: :h2).with_content("Title") %>
<% c.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 |c| %>
<% c.visual_icon(icon: :globe) %>
<% c.heading(tag: :h2).with_content("Title") %>
<% c.description { "Description"} %>
<% end %>

Loading

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

Loading

Title

Description
<%= render Primer::Beta::Blankslate.new do |c| %>
<% c.visual_spinner(size: :large) %>
<% c.heading(tag: :h2).with_content("Title") %>
<% c.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 |c| %>
<% c.visual_image(src: "https://github.githubassets.com/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
<% c.heading(tag: :h2).with_content("Title") %>
<% c.description { "Description"} %>
<% end %>

Custom content

Pass custom content to description.

Title

Your custom content here
<%= render Primer::Beta::Blankslate.new do |c| %>
<% c.heading(tag: :h2).with_content("Title") %>
<% c.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 |c| %>
<% c.visual_icon(icon: :book) %>
<% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
<% c.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."} %>
<% c.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.
<%= render Primer::Beta::Blankslate.new do |c| %>
<% c.visual_icon(icon: :book) %>
<% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
<% c.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."} %>
<% c.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
<%= render Primer::Beta::Blankslate.new do |c| %>
<% c.visual_icon(icon: :book) %>
<% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
<% c.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."} %>
<% c.primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
<% c.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 |c| %>
<% c.visual_icon(icon: :book) %>
<% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
<% c.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 |c| %>
<% c.visual_icon(icon: :book) %>
<% c.heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
<% c.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 %>