Blankslate

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

Page navigation navigation

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>

More code examples

See the Blankslate Storybook stories.

Props

Loading data for blankslate...