Primer/ViewComponents

What's new

Design

Interface guidelines Octicons Presentations Command line Mobile Desktop

Build

CSS React ViewComponents

Contribute About

On this page

Accessibility
Arguments
Slots
Examples

Blankslate

Beta

View source View storybook

On this page

Accessibility
Arguments
Slots
Examples

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

Name	Type	Default	Description
`narrow`	`Boolean`	`false`	Adds a maximum width of `485px` to the Blankslate.
`spacious`	`Boolean`	`false`	Increases the padding from `32px` to `80px 40px`.
`border`	`Boolean`	`false`	Adds a border around the Blankslate.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`Visual`

Optional visual.

Use:

visual_icon for an Octicon.
visual_image for an Image.
visual_spinner for a Spinner.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

`Heading`

Required heading.

Name	Type	Default	Description
`tag`	`String`	N/A	One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
`system_arguments`	`Hash`	N/A	System arguments

`Description`

Optional description.

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

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System 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.

Name	Type	Default	Description
`href`	`String`	N/A	URL to be used for the primary action.
`system_arguments`	`Hash`	N/A	System 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).

Name	Type	Default	Description
`href`	`String`	N/A	URL to be used for the secondary action.
`system_arguments`	`Hash`	N/A	System 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.

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.

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.

Learn more about wikis

<%= 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

Learn more about wikis

<%= 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 %>

Edit this page on GitHub