title: "PageHeader" slug: "/packages/page-header" category: "layout" componentNames:

• "PageHeader"

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

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

Banner Image Example

You can also use an image in the page header.

<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.