Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

_10
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:

_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:
NameTypeDescriptionDefault
variant"primary" | "secondary"Specifies the component direction variant.primary
colorVariant"main" | "light" | "accent"Specifies the component's color variant combination.main
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-banner-text
NameTypeDescriptionDefault
title*stringThe content for the h2 tag.
caption*stringThe content for the p tag below the h2.
link*stringThe href used at the link.
linkText*stringThe label used at the link.
linkTargetBlankfalse | trueSpecify if the link opens in a new tab.
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-banner-text-content

Design Tokens

Local tokenDefault value/Global token linked
--fs-banner-text-padding-mobilevar(--fs-spacing-6) 5%
--fs-banner-text-padding-desktopvar(--fs-spacing-9) 15%

Nested Elements

Button Link

Local tokenDefault value/Global token linked
--fs-banner-text-button-link-min-width11.25rem
--fs-banner-text-button-link-margin-topvar(--fs-spacing-6)

Title

Local tokenDefault value/Global token linked
--fs-banner-text-title-sizevar(--fs-text-size-lead)
--fs-banner-text-title-weightvar(--fs-text-weight-bold)
--fs-banner-text-line-height1.2

Hierarchy

Primary

Example
Code

Explore more about our amazing products

See more
Local tokenDefault value/Global token linked
--fs-hero-primary-title-sizevar(--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 tokenDefault value/Global token linked
--fs-banner-text-secondary-title-sizevar(--fs-text-size-4)
--fs-banner-text-secondary-caption-sizevar(--fs-text-size-base)
--fs-banner-text-secondary-caption-weightvar(--fs-text-weight-regular)
--fs-banner-text-secondary-caption-line-height1.5

Variants

Main

Example
Code

Explore more about our amazing products

See more
Local tokenDefault 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 tokenDefault 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 tokenDefault 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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page