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.
Document APIs
::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 →
:::
::
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 isleft
.border
- default isnull
.borderRadius
- default isnull
.background
- default isundefined
.backgroundColor
- default isinitial
.color
- default is''
.margin
- default is0
.padding
- default is0
.backgroundImage
- default isundefined
.styles
- default is''
.