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-display-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-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',
  },
];
</script>

Vertical Display

Vertical display block with image and content below or above it.

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-display-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" class="w-full" />
        </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.

Edit this page

← Alert

Breadcrumbs →