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 |c| %><% c.heading(tag: :h2).with_content("Title") %><% c.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 |c| %><% c.visual_icon(icon: :globe) %><% c.heading(tag: :h2).with_content("Title") %><% c.description { "Description"} %><% end %>
Add a SpinnerComponent to the blankslate in place of an icon.
Description
<%= render Primer::Beta::Blankslate.new do |c| %><% c.visual_spinner(size: :large) %><% c.heading(tag: :h2).with_content("Title") %><% c.description { "Description"} %><% end %>
Add an image
to give context that an Octicon couldn't.
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 %>
Pass custom content to description
.
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 %>
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 |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 %>
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 |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_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 |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 %>
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 |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 %>
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 |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 %>