Blankslate component purpose
Blankslate is used as a placeholder to tell users why content is missing.
blankslate
5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Blankslate anatomy elements
The Blankslate component is made up of several elements: a graphic, primary text, secondary text (optional), primary action, secondary action (optional), and an optional border. The graphic can bring delight, preview an interface element, or represent the goal of the feature. Primary text explains the purpose of the empty state and should sound welcoming and human. Secondary text informs the user about the feature in more detail and should be brief and non-redundant. The primary action is a button that leads to a feature or component creation flow with brief, descriptive copy. Secondary actions are optional text links located below the primary action, used to direct users to additional content. The border is invisible by default but can be added to help define the structure.
Blankslate Octicon variation
Octicons can be used to represent the feature where the Blankslate is found. If the Octicon is not purely decorative but intended to convey meaning or purpose that is not already apparent from the text used in the component, a meaningful text alternative must be added to the Octicon via aria-label.
Blankslate code block variation
Blankslates that use a list of steps or offer instructions in the format of code to get started with a feature can insert a code block. This variation is used in cases such as getting started with packages in GitHub.
Blankslate first time user experience variation
For first time user experiences, use illustration Blankslates to playfully engage the user and introduce the Octocat as a symbol of GitHub. Primary text should welcome the user to the platform and feature. Secondary text should seek to educate the user at a simpler, less-technical level.