Vue
Banners
Banners are components that deliver main image and content in various configurations.
Horizontal Display
<template>
<div class="flex flex-col md:flex-row flex-wrap gap-6 max-w-[1540px]">
<div
v-for="{
image,
title,
subtitle,
description,
buttonText,
backgroundColor,
reverse,
titleClass,
subtitleClass,
} in displayDetails"
:key="title"
:class="[
'relative flex md:max-w-[1536px] md:[&:not(:first-of-type)]:flex-1 md:first-of-type:w-full',
backgroundColor,
]"
>
<a
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
:aria-label="title"
href="#"
/>
<div :class="['flex justify-between overflow-hidden grow', { 'flex-row-reverse': reverse }]">
<div class="flex flex-col justify-center items-start p-6 lg:p-10 max-w-1/2">
<p :class="['uppercase typography-text-xs block font-bold tracking-widest', subtitleClass]">
{{ subtitle }}
</p>
<h2 :class="['mb-4 mt-2 font-bold typography-headline-3', titleClass]">
{{ title }}
</h2>
<p class="typography-text-base block mb-4">
{{ description }}
</p>
<SfButton class="!bg-black">{{ buttonText }}</SfButton>
</div>
<img :src="image" :alt="title" class="w-1/2 self-end object-contain" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
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-headline-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',
},
];
</script>
Vertical Display
Vertical display block with image and content below or above it.
<template>
<div class="flex flex-col gap-6 md:flex-row">
<div
v-for="{ title, subtitle, description, callToAction, image, backgroundColor, reverse } in displayDetails"
:key="title"
:class="[
`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
{ 'flex-col-reverse': reverse },
]"
>
<a
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
:aria-label="title"
href="#"
/>
<div class="flex flex-col items-center p-4 text-center md:p-10">
<p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">{{ subtitle }}</p>
<p class="mb-4 font-bold typography-headline-2">{{ title }}</p>
<p class="mb-4 typography-text-lg">{{ description }}</p>
<SfButton class="font-semibold !bg-neutral-900">
{{ callToAction }}
</SfButton>
</div>
<div class="flex items-center w-full">
<img :src="image" :alt="title" width="100%" height="auto" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
const displayDetails = [
{
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,
},
{
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,
},
];
</script>
Multiple vertical Displays
Four vertical displays in row on desktop.
<template>
<div class="flex flex-col gap-6 md:flex-row">
<div class="flex flex-col gap-6 md:flex-row">
<div
v-for="{ title, subtitle, description, callToAction, image, backgroundColor, reverse } in displayDetails"
:key="title"
:class="[
`relative flex flex-col justify-between rounded-md md:items-center md:basis-1/2 ${backgroundColor}`,
{ 'flex-col-reverse': reverse },
]"
>
<a
class="absolute w-full h-full z-1 focus-visible:outline focus-visible:rounded-lg"
:aria-label="title"
href="#"
/>
<div class="flex flex-col p-4 text-center md:p-10">
<p class="mb-2 font-bold tracking-widest uppercase typography-headline-6">{{ subtitle }}</p>
<p class="mb-4 font-bold typography-headline-2">{{ title }}</p>
<p class="mb-4 typography-text-lg">{{ description }}</p>
<SfButton class="font-semibold !bg-neutral-900">
{{ callToAction }}
</SfButton>
</div>
<div class="flex items-center w-full">
<img :src="image" :alt="title" width="100%" height="auto" />
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
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,
},
];
</script>
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.
<template>
<div class="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"
class="absolute w-full h-full z-[-1] md:object-cover"
/>
</picture>
<div class="md:flex md:flex-row-reverse md:justify-center max-w[1536px] mx-auto md:min-h-[600px]">
<div class="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"
class="h-full object-cover object-left"
/>
</div>
<div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
<p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
Feel the music
</p>
<h1 class="typography-headline-2 md:typography-headline-1 md:leading-[67.5px] font-bold mt-2 mb-4">
New Wireless Pro
</h1>
<p class="typography-text-base md:typography-text-lg">
Spatial audio. Adjustable ear cups. On-device controls. All-day battery.
</p>
<div class="flex flex-col md:flex-row gap-4 mt-6">
<SfButton size="lg"> Order now </SfButton>
<SfButton size="lg" variant="secondary" class="bg-white"> Show more </SfButton>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>