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.

Example

Code

Explore more about our amazing products

Usage

Import the component


_10import { BannerText, BannerTextContent } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/organisms/BannerText/styles.scss";

For details, see Importing FastStore UI component styles.

Examples

Variants

Primary

Example

Code

Explore more about our amazing products

Secondary

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Color variants

Main

Example

Code

Explore more about our amazing products

Light

Example

Code

Explore more about our amazing products

Accent

Example

Code

Explore more about our amazing products

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`

Design tokens: Primary

Local token	Default value/Global token linked
`--fs-hero-primary-title-size`	`var(--fs-text-size-title-page)`

Design tokens: 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`

Design tokens: 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)`

Design tokens: 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)`

Design tokens: 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)`

Data attributes

You can target and override BannerText styles using the following data attributes: 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

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`