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.

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


_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

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%`

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

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.

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

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

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

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