Blankslate

Use blank slate when there is a lack of content within a page or section.

Deprecated
Not reviewed for accessibility

Source

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

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

Name	Type	Default	Description
`title`	`String`	`""`	Text that appears in a larger bold font.
`title_tag`	`Symbol`	`:h3`	HTML tag to use for title.
`icon`	`Symbol`	`""`	Octicon icon to use at top of component.
`icon_size`	`Symbol`	`:medium`	One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`).
`image_src`	`String`	`""`	Image to display.
`image_alt`	`String`	`" "`	Alt text for image.
`description`	`String`	`""`	Text that appears below the title. Typically a whole sentence.
`button_text`	`String`	`""`	The text of the button.
`button_url`	`String`	`""`	The URL where the user will be taken after clicking the button.
`button_classes`	`String`	`"btn-primary my-3"`	Classes to apply to action button
`link_text`	`String`	`""`	The text of the link.
`link_url`	`String`	`""`	The URL where the user will be taken after clicking the link.
`narrow`	`Boolean`	`false`	Adds a maximum width.
`large`	`Boolean`	`false`	Increases the font size.
`spacious`	`Boolean`	`false`	Adds extra padding.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`spinner`

Optional Spinner.

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

Title

Description

<%= render Primer::BlankslateComponent.new(
  title: "Title",
  description: "Description",
) do |component| %>
  <% component.with_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",
) %>

Link

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,
) %>