BannerText
Displays brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button.
The
BannerText
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
_10import { 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:
_10@import '@faststore/ui/src/components/organisms/BannerText/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
Explore more about our amazing products
See more
Props
All banner text related components support all attributes also supported by the
<div>
tag.
Besides those attributes, the following props are also supported:BannerText
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 |
BannerTextContent
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% |
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
Example
Code
Explore more about our amazing products
See more
Local token | Default value/Global token linked |
---|---|
--fs-hero-primary-title-size | var(--fs-text-size-title-page) |
Secondary
Example
Code
Explore more about our amazing products
All the amazing products from the brands we partner with.
See more
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
Example
Code
Explore more about our amazing products
See more
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
Example
Code
Explore more about our amazing products
See more
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
Example
Code
Explore more about our amazing products
See more
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