Preview

Usage

<cs-header variant="h1">Page title</cs-header>
<cs-header variant="h2" counter="(12)">Resources</cs-header>
<cs-header variant="h2" description="Manage settings.">Settings</cs-header>

Properties

heading-tag-overrideHeaderProps.HeadingTag

Overrides the default HTML heading tag provided by the variant. Using this property does not change the visual appearance of the component.

variantHeaderProps.Variant default: 'h2'

Specifies the variant of the header:

• h1 - Use this for page level headers.
• h2 - Use this for container level headers.
• h3 - Use this for section level headers.
• awsui-h1-sticky - Use this for sticky headers in cards and tables.

Slots

actions

Actions for the container.

counter

Specifies secondary content that's displayed to the right of the heading title. This is commonly used to display resource counters in table and cards components.

default

The heading text. Plain text is recommended. The component renders the HTML heading tag based on the specified variant or headingTagOverride.

description

Supplementary text below the heading.

info

Area next to the heading to display an Info link.