⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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

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

Banner Text Content

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%
--fs-banner-text-border-radiusvar(--fs-border-radius)

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

Local tokenDefault value/Global token linked
--fs-hero-primary-title-sizevar(--fs-text-size-title-page)

Secondary

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

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

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

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