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.

::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 0.
  • padding - default is 0.
  • backgroundImage - default is undefined.
  • styles - default is ''.