Banner Component
Display a banner with optional heading, description, and action slot.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | undefined | The heading text to display in the banner. |
description | string | undefined | The description text to display in the banner. |
image | string | undefined | The URL of the background image to display in the banner. |
full-width | boolean | false | Whether the banner should take the full width of its container. |
variant | 'default' | 'hero' | 'default' | The variant style of the banner. |
background-color | string | undefined | The background color of the banner. |
textColor | string | undefined | The text color of the banner. |
CSS Parts
| Name | Description |
|---|---|
banner | The main banner element. |
content | The content container inside the banner. |
action | The action container inside the banner. |
extra | The extra slot container inside the hero variant. |
Check this link to learn how to use CSS parts for Banner Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-sys-spacing-6 | - | Spacing around the banner content. |
--tap-banner-color-surface | - | Background color of the banner. |
--tap-sys-radius-4 | - | Border radius of the banner. |
--tap-banner-background-image | - | Background image of the banner. |
--tap-sys-spacing-4 | - | Margin around the banner. |
--tap-banner-color-content | - | Text color of the banner. |
--tap-sys-typography-headline-xs-font | --tap-sys-font-family | Font family for the heading text. |
--tap-sys-typography-headline-xs-height | - | Line height for the heading text. |
--tap-sys-typography-headline-xs-size | - | Font size for the heading text. |
--tap-sys-typography-headline-xs-weight | - | Font weight for the heading text. |
--tap-sys-spacing-3 | - | Margin below the heading text. |
--tap-sys-typography-body-xs-font | - | Font family for the description text. |
--tap-sys-typography-body-xs-height | - | Line height for the description text. |
--tap-sys-typography-body-xs-size | - | Font size for the description text. |
--tap-sys-typography-body-xs-weight | - | Font weight for the description text. |
--tap-sys-spacing-5 | - | Margin above the action slot. |
--tap-sys-spacing-8 | - | Minimum height of the extra slot in the hero variant. |