Page Header

The page header component can be used for listing pages (e.g. Apps, Topics. Blog), as well as on static pages (e.g. About) and resource listing pages. It consists of a title, lead, and can include an illustration or an image.

import PageHeader from "@ds-kit/page-header"

Basic Example

Heading
This is the subtitle for this header
<PageHeader title="Heading" subtitle="This is the subtitle for this header" />

You can also use an image in the page header.

Bloggen
Nya visualiseringar av samhällsfrågor och inspiration med öppna data från hela världen. Följ med i vårt arbete – bakom kulisserna.
<PageHeader
  title="Bloggen"
  subtitle="Nya visualiseringar av samhällsfrågor och inspiration med öppna data från hela världen. Följ med i vårt arbete – bakom kulisserna."
  image="https://www.datocms-assets.com/5436//1542638416-longview.svg"
/>

Patterns

Check out the page header patterns to see the page header in action.

PageHeader props

Name

Type

Default

title

string

subtitle

string

size

string

"md"

image

string

imageProps

object

{}

bg

stringarray

"white"

color

stringarray

"inherit"

titleColor

stringarray

"inherit"

subtitleColor

stringarray

"inherit"

children

nodearrayOf

Sections