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.
aria-hidden=”true”
and img alt=””
, which will hide the visual from screen reader users.secondary_action
text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".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 |
visual
Optional visual.
Use:
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.
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 |
Description
<%= render Primer::Beta::Blankslate.new do |component| %><% component.with_heading(tag: :h2).with_content("Title") %><% component.with_description { "Description"} %><% end %>
Add an icon
to give additional context. Refer to the Octicons documentation to choose an icon.
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 %>
Add a SpinnerComponent to the blankslate in place of an icon.
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 %>
Add an image
to give context that an Octicon couldn't.
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 %>
Pass custom content to description
.
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 %>
Provide a primary_action
to guide users to take action from the blankslate. The primary_action
appears below the description and custom content.
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 |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 %>
Add an additional secondary_action
to help users learn more about a feature. See Accessibility. secondary_action
will be shown at the very bottom:
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 |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_action
and secondary_action
can also be used together. The primary_action
will always be rendered before the secondary_action
:
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 |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 %>
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
.
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 %>
It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
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 %>