Blankslate

Blankslate is used as placeholder to tell users why content is missing.

Page navigation navigation

React

draftNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

The most common usage of a Blankslate component.

Welcome to the 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

<Blankslate>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

<Blankslate>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

With a secondary action

Welcome to the 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

Learn more about wikis

<Blankslate>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
  <Blankslate.SecondaryAction href="#">Learn more about wikis</Blankslate.SecondaryAction>
</Blankslate>

<Blankslate>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
  <Blankslate.SecondaryAction href="#">Learn more about wikis</Blankslate.SecondaryAction>
</Blankslate>

Narrow variant

Welcome to the 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

<Blankslate narrow>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

<Blankslate narrow>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

Spacious variant

Welcome to the 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

<Blankslate spacious>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

<Blankslate spacious>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

With a border

Welcome to the 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

<Blankslate border>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

<Blankslate border>
  <Blankslate.Visual>
    <BookIcon size="medium" />
  </Blankslate.Visual>
  <Blankslate.Heading>Welcome to the wiki</Blankslate.Heading>
  <Blankslate.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.
  </Blankslate.Description>
  <Blankslate.PrimaryAction href="#">Create the first page</Blankslate.PrimaryAction>
</Blankslate>

Name	Required	Description
border		`boolean` Add a border around this component
narrow		`boolean`
spacious		`boolean`
className		`string` Class name(s) for custom styling.

Blankslate.Visual

Name	Required	Description

Blankslate.Heading

Name	Required	Description
as		`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`

Blankslate.Description

Name	Required	Description

Blankslate.PrimaryAction

Name	Required	Description
href		`string` Link to complete primary action. If defined, will render as an anchor instead of a button.

Blankslate.SecondaryAction

Name	Required	Description
href		`string` Link to complete secondary action

Blankslate

Page navigation navigation

React examples

Default

Welcome to the wiki

With a secondary action

Welcome to the wiki

Narrow variant

Welcome to the wiki

Spacious variant

Welcome to the wiki

With a border

Welcome to the wiki

More code examples

Props

Blankslate

Blankslate.Visual

Blankslate.Heading

Blankslate.Description

Blankslate.PrimaryAction

Blankslate.SecondaryAction