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

The Hero component simplifies the process of creating stunning hero sections for your website. With Hero, you have the flexibility to seamlessly integrate a main image and customize your content to suit your needs. Additionally, Hero allows adding background images tailored for both mobile and desktop devices. To ensure an optimal blend of performance and visual appeal, we recommend adhering to the following image guidelines:

Desktop Background Images: Minimum width: 3840px Aspect ratio: 4:1.5 Example size: 3840px x 1440px

Mobile Background Images: Minimum width: 768px Aspect ratio: 3:4 Example size: 768px x 1024px