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

Blankslate renders an <h3> element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting title_tag. Learn more about best heading practices (WAI Headings)

Arguments

NameTypeDefaultDescription
titleString""Text that appears in a larger bold font.
title_tagSymbol:h3HTML tag to use for title.
iconSymbol""Octicon icon to use at top of component.
icon_sizeSymbol:mediumOne of :small (16) and :medium (24).
image_srcString""Image to display.
image_altString" "Alt text for image.
descriptionString""Text that appears below the title. Typically a whole sentence.
button_textString""The text of the button.
button_urlString""The URL where the user will be taken after clicking the button.
button_classesString"btn-primary my-3"Classes to apply to action button
link_textString""The text of the link.
link_urlString""The URL where the user will be taken after clicking the link.
narrowBooleanfalseAdds a maximum width.
largeBooleanfalseIncreases the font size.
spaciousBooleanfalseAdds extra padding.
system_argumentsHashN/ASystem arguments

Slots

Spinner

Optional Spinner.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Spinner.

Examples

Basic

Title

Description

<%= render Primer::BlankslateComponent.new(
title: "Title",
description: "Description",
) %>

Icon

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

Title

Description

<%= render Primer::BlankslateComponent.new(
icon: :globe,
title: "Title",
description: "Description",
) %>

Loading

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

Loading

Title

Description

<%= render Primer::BlankslateComponent.new(
title: "Title",
description: "Description",
) do |component| %>
<% component.spinner(size: :large) %>
<% end %>

Custom content

Pass custom content as a block in place of description.

Title

Your custom content here
<%= render Primer::BlankslateComponent.new(
title: "Title",
) do %>
<em>Your custom content here</em>
<% end %>

Action button

Provide a button to guide users to take action from the blankslate. The button 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::BlankslateComponent.new(
icon: :book,
title: "Welcome to the mona wiki!",
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.",
button_text: "Create the first page",
button_url: "https://github.com/monalisa/mona/wiki/_new",
) %>

Add an additional link to help users learn more about a feature. The link 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::BlankslateComponent.new(
icon: :book,
title: "Welcome to the mona wiki!",
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.",
link_text: "Learn more about wikis",
link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
) %>

Variations

There are a few variations of how the Blankslate appears: narrow adds a maximum width, large increases the font size, and spacious adds extra padding.

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::BlankslateComponent.new(
icon: :book,
title: "Welcome to the mona wiki!",
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.",
narrow: true,
large: true,
spacious: true,
) %>