Blankslate

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

Page navigation navigation

React

experimental

Storybook|Source

Rails

ready

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	Default	Description
border		`boolean` Add a border around this component
narrow		`boolean`
spacious		`boolean`
className		`string` Class name(s) for custom styling.
size	`'medium'`	`'small' \| 'medium' \| 'large'` The size of the componeont