Banner Text
Banner Text is used for advertising brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button.
The final BannerText component is a compound of the following:
BannerText: wraps the BannerText component.BannerTextContent: the content of the banner, including a title, caption, and Link.
Import
Import the component from @faststore/ui
import { BannerText, BannerTextContent } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/organisms/BannerText/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Props
All banner text related components support all attributes also supported by the <div> tag.
Besides those attributes, the following props are also supported:
Banner Text
| Name | Type | Description | Default |
|---|---|---|---|
| variant | "primary" | "secondary" | Specifies the component direction variant. | primary |
| colorVariant | "main" | "light" | "accent" | Specifies the component's color variant combination. | main |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-banner-text |
Banner Text Content
| Name | Type | Description | Default |
|---|---|---|---|
| title* | string | The content for the h2 tag. | |
| caption* | string | The content for the p tag below the h2. | |
| link* | string | The href used at the link. | |
| linkText* | string | The label used at the link. | |
| linkTargetBlank | false | true | Specify if the link opens in a new tab. | |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-banner-text-content |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-padding-mobile | var(--fs-spacing-6) 5% |
--fs-banner-text-padding-desktop | var(--fs-spacing-9) 15% |
--fs-banner-text-border-radius | var(--fs-border-radius) |
Nested Elements
Button Link
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-button-link-min-width | 11.25rem |
--fs-banner-text-button-link-margin-top | var(--fs-spacing-6) |
Title
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-title-size | var(--fs-text-size-lead) |
--fs-banner-text-title-weight | var(--fs-text-weight-bold) |
--fs-banner-text-line-height | 1.2 |
Hierarchy
Primary
| Local token | Default value/Global token linked |
|---|---|
--fs-hero-primary-title-size | var(--fs-text-size-title-page) |
Secondary
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-secondary-title-size | var(--fs-text-size-4) |
--fs-banner-text-secondary-caption-size | var(--fs-text-size-base) |
--fs-banner-text-secondary-caption-weight | var(--fs-text-weight-regular) |
--fs-banner-text-secondary-caption-line-height | 1.5 |
Variants
Main
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-main-bkg-color | var(--fs-color-primary-bkg) |
--fs-banner-text-main-text-color | var(--fs-color-primary-text) |
Light
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-light-bkg-color | var(--fs-color-secondary-bkg-light) |
--fs-banner-text-light-text-color | var(--fs-color-text-display) |
Accent
| Local token | Default value/Global token linked |
|---|---|
--fs-banner-text-accent-bkg-color | var(--fs-color-highlighted-bkg) |
--fs-banner-text-accent-text-color | var(--fs-banner-text-light-text-color) |
Customization
data-fs-banner-text
data-fs-banner-text-variant="primary" | "secondary"
data-fs-banner-text-color-variant="main" | "light" | "accent"
data-fs-banner-text-content
data-fs-banner-text-heading
data-fs-banner-text-link