Components

Page Header

A clean, structured component for page headers that displays a title, description, tagline, and actions, helping to organize and introduce page content.

Usage

The Page Header component provides a structured layout for the top section of your pages with clear visual hierarchy, creating a consistent and professional introduction, as demonstrated at the top of this documentation page.

The Page Header includes optional elements like a tagline positioned above the title, descriptive text below, and a slot for action buttons or badges, making it perfect for introducing new sections or pages.

Guides

Document APIs

Discover best practices, tools, and examples to help developers understand and use your APIs with confidence.
Get Started →
::page-header
---
tagline: "Guides"
tagline-color: "var(--kui-color-text-primary)"
title: "Document APIs"
title-tag: "h1"
title-color: "var(--kui-color-text)"
description: "Discover best practices, tools, and examples to help developers understand and use your APIs with confidence."
description-color: "var(--kui-color-text-neutral)"
text-align: "left"
text-max-width: "100%"
---
#actions
  :::button
  ---
  appearance: "primary"
  size: "large"
  to: "#props"
  ---
  Get Started →
  :::
::
PageHeader Component Props

The tagline text to display above the page header title.

The tagline text color. Will utilize the `color` prop value if not set.

The page title text.

The HTML tag to use for the title.

The title text color. Will utilize the `color` prop value if not set.

The description text to display below the page header title.

The description text color. Will utilize the `color` prop value if not set.

Aligns the text displayed in the component. Accepts values for text-align css property.

Set max width for the text content.

The text color of the element. Accepts string.

The background color of the component. Accepts string | null.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

Props

title

The text to display as the title within the page header. If title slot content is provided, it will take precedence over this prop.

  • Type: string
  • Default: ''

titleTag

The HTML tag to use for the title element.

  • Type: string
  • Default: h1

titleColor

The title text color.

  • Type: string
  • Default: var(--kui-color-text, initial)

titleFontSize

The font size of the title text.

  • Type: string
  • Default: clamp(32px, 3vw, 40px)

titleFontWeight

The font weight of the title text.

  • Type: string
  • Default: 700

titleLineHeight

The line-height of the title text.

  • Type: string
  • Default: clamp(40px, 3vw, 48px)

description

The description text to display below the page header title. If description slot content is provided, it will take precedence over this prop.

  • Type: string
  • Default: ''

descriptionColor

The description text color.

  • Type: string
  • Default: var(--kui-color-text-neutral, initial)

descriptionFontSize

The font size of the description text.

  • Type: string
  • Default: 18px

descriptionFontWeight

The font weight of the description text.

  • Type: string
  • Default: 500

descriptionLineHeight

The line-height of the description text.

  • Type: string
  • Default: 28px

tagline

The text to display above the page header title. If tagline slot content is provided, it will take precedence over this prop.

  • Type: string
  • Default: ''

taglineColor

The tagline text color.

  • Type: string
  • Default: var(--kui-color-text-primary, initial)

textMaxWidth

The max width of the text content (title, description, actions and tagline).

  • Type: string
  • Default: 100%

Shared Props

This component also includes the shared props listed below:

  • textAlign - default is left.
  • border - default is null.
  • borderRadius - default is null.
  • background - default is undefined.
  • backgroundColor - default is initial.
  • color - default is ''.
  • margin - default is var(--kui-space-0, 0).
  • padding - default is var(--kui-space-0, 0).
  • backgroundImage - default is undefined.
  • styles - default is ''.

See here for more information on shared props.

Slots

tagline

Use the #tagline slot to add content above the title of the Page Header component.

title

Use the #title slot to add title content to the Page Header component.

description

Use the #description slot to add description content to the Page Header component, including markdown or MDC.

actions

Use the #actions slot to add content at the bottom of the Page Header component.