React
Banners
Banners are components that deliver main image and content in various configurations.
Horizontal Display
import { SfButton } from '@storefront-ui/react';
import classNames from 'classnames';
const displayDetails = [
{
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
title: 'Sunny Days Ahead',
subtitle: 'Be inspired',
description: 'Step out in style with our sunglasses collection',
buttonText: 'Discover now',
reverse: false,
backgroundColor: 'bg-negative-200',
titleClass: 'md:typography-display-2',
subtitleClass: 'md:typography-headline-6',
descriptionClass: 'md:typography-text-lg',
},
{
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
title: 'Pack it Up',
subtitle: 'Be active',
description: 'Explore the great outdoors with our backpacks',
buttonText: 'Discover now',
reverse: true,
backgroundColor: 'bg-warning-200',
},
{
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-3.png',
title: 'Fresh and Bold',
subtitle: 'New collection',
description: 'Add a pop up color to your outfit',
buttonText: 'Discover now',
reverse: false,
backgroundColor: 'bg-secondary-200',
},
];
export default function DisplayHorizontalBlock() {
return (
<div className="flex flex-col md:flex-row flex-wrap gap-6 max-w-[1540px]">
{displayDetails.map(
({ image, title, subtitle, description, buttonText, backgroundColor, reverse, titleClass, subtitleClass }) => (
<div
key={title}
className={classNames(
'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full',
backgroundColor,
)}
>
<a
className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
aria-label={title}
href="#"
/>
<div
className={classNames('flex justify-between overflow-hidden grow', {
'flex-row-reverse': reverse,
})}
>
<div className="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
<p
className={classNames('uppercase typography-text-xs block font-bold tracking-widest', subtitleClass)}
>
{subtitle}
</p>
<h2 className={classNames('mb-4 mt-2 font-bold typography-display-3', titleClass)}>{title}</h2>
<p className="typography-text-base block mb-4">{description}</p>
<SfButton className="!bg-black">{buttonText}</SfButton>
</div>
<img src={image} alt={title} className="w-1/2 self-end object-contain" />
</div>
</div>
),
)}
</div>
);
}
Vertical Display
Vertical display block with image and content below or above it.
import { SfButton } from '@storefront-ui/react';
import classNames from 'classnames';
const displayDetails = [
{
title: 'Pack it Up',
subtitle: 'Be active',
description: 'Explore the great outdoors with our backpacks',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
backgroundColor: 'bg-warning-200',
reverse: false,
},
{
title: 'Sunny Days Ahead',
subtitle: 'Be inspired',
description: 'Step out in style with our sunglasses collection',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
backgroundColor: 'bg-negative-200',
reverse: true,
},
];
export default function DisplayVertical() {
return (
<div className="flex flex-col gap-6 md:flex-row">
{displayDetails.map(({ title, subtitle, description, callToAction, image, backgroundColor, reverse }) => (
<div
key={title}
className={classNames(
`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
{ 'flex-col-reverse': reverse },
)}
>
<a
className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
aria-label={title}
href="#"
/>
<div className="flex flex-col items-center p-4 text-center md:p-10">
<p className="mb-2 font-bold tracking-widest uppercase typography-headline-6">{subtitle}</p>
<p className="mb-4 font-bold typography-display-2">{title}</p>
<p className="mb-4 typography-text-lg">{description}</p>
<SfButton className="font-semibold !bg-neutral-900">{callToAction}</SfButton>
</div>
<div className="flex items-center w-full">
<img src={image} alt={title} className="w-full" />
</div>
</div>
))}
</div>
);
}
Multiple vertical Displays
Four vertical displays in row on desktop.
import { SfButton } from '@storefront-ui/react';
import classNames from 'classnames';
const displayDetails = [
{
title: 'Pack it Up',
subtitle: 'Be active',
description: 'Explore the great outdoors with our backpacks',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
backgroundColor: 'bg-warning-200',
reverse: false,
},
{
title: 'Sunny Days Ahead',
subtitle: 'Be inspired',
description: 'Step out in style with our sunglasses collection',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
backgroundColor: 'bg-negative-200',
reverse: true,
},
{
title: 'Pack it Up',
subtitle: 'Be active',
description: 'Explore the great outdoors with our backpacks',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display-2.png',
backgroundColor: 'bg-warning-200',
reverse: true,
},
{
title: 'Sunny Days Ahead',
subtitle: 'Be inspired',
description: 'Step out in style with our sunglasses collection',
callToAction: 'Discover now',
image: 'https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/display.png',
backgroundColor: 'bg-negative-200',
reverse: false,
},
];
export default function DisplayVerticalMultiple() {
return (
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex flex-col gap-6 md:flex-row">
{displayDetails.map(
({ title, subtitle, description, callToAction, image, backgroundColor, reverse }, index) => (
<div
key={`${title}-${index}`}
className={classNames(
`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
{ 'flex-col-reverse': reverse },
)}
>
<a
className="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
aria-label={title}
href="#"
/>
<div className="flex flex-col items-center p-4 text-center md:p-10">
<p className="mb-2 font-bold tracking-widest uppercase typography-headline-6">{subtitle}</p>
<p className="mb-4 font-bold typography-display-2">{title}</p>
<p className="mb-4 typography-text-lg">{description}</p>
<SfButton className="font-semibold !bg-neutral-900">{callToAction}</SfButton>
</div>
<div className="flex items-center w-full">
<img src={image} alt={title} className="w-full" />
</div>
</div>
),
)}
</div>
</div>
);
}
Hero
Hero acts like a layout for your hero section. You can provide main image and any content, as well as background images for mobile and desktop devices.
import { SfButton } from '@storefront-ui/react';
export default function Hero() {
return (
<div className="relative min-h-[600px]">
<picture>
<source srcSet="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/hero-bg.png" media="(min-width: 768px)" />
<img
src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/hero-bg-mobile.png"
className="absolute w-full h-full z-[-1] md:object-cover"
/>
</picture>
<div className="md:flex md:flex-row-reverse md:justify-center min-h-[600px] max-w-[1536px] mx-auto">
<div className="flex flex-col md:basis-2/4 md:items-stretch md:overflow-hidden">
<img
src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/hero-headphones.png"
alt="Headphones"
className="h-full object-cover object-left"
/>
</div>
<div className="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
<p className="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
Feel the music
</p>
<h1 className="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
New Wireless Pro
</h1>
<p className="typography-text-base md:typography-text-lg">
Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
</p>
<div className="flex flex-col md:flex-row gap-4 mt-6">
<SfButton size="lg"> Order now </SfButton>
<SfButton size="lg" className="bg-white" variant="secondary">
Show more
</SfButton>
</div>
</div>
</div>
</div>
);
}