Banner

Banners are used for advertising brands, products, and/or collections. They comprise an image, some text content, and a call-to-action button. The final Banner component is a compound of the following:

• BannerImage: the component that wraps the image displayed in the component.
• BannerContent: the content of the banner, including a title, description, and BannerLink.
• BannerLink: the banner's call-to-action link.

Import

import { Banner, BannerImage, BannerContent, BannerLink } from '@faststore/ui'

Usage

Get to know our new release

Your one-stop shop for making this summer season the best of all.

Shop now

Variants

Horizontal

Get to know our new release

Your one-stop shop for making this summer season the best of all.

Shop now

Props

All banner-related components support all attributes also supported by the <div> tag.

Besides those attributes, the following props are also supported:

Banner

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).

Default value

store-banner

variantBannerDirectionVariant

Default value

vertical

BannerImage

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

Default value

store-banner-image

BannerContent

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).

Default value

store-banner

variantBannerDirectionVariant

Default value

vertical

Customization

data-store-banner

data-store-banner=('vertical'|'horizontal')

data-banner-image

data-banner-content

data-banner-link