Hero Banner

Stable

Used to highlight important information on a page

<script setup lang="ts">
import { HHeroBanner } from '@holistics/design-system'

const title = 'Hero Banner title'
</script>
<template>
  <HHeroBanner :title>
    Description
    <template #image>
      <img src="./background.svg">
    </template>
  </HHeroBanner>
</template>

Examples

Colors

<script setup lang="ts">
import { HHeroBanner } from '@holistics/design-system'

const title = 'Hero Banner title'
const colors = ['blue', 'white', 'green'] as const
</script>
<template>
  <div class="flex flex-col gap-8">
    <HHeroBanner
      v-for="color in colors"
      :key="color"
      :title
      :color
    >
      Description
      <template #image>
        <img src="./background.svg">
      </template>
    </HHeroBanner>
  </div>
</template>

Vertical Layout

<script setup lang="ts">
import { HHeroBanner } from '@holistics/design-system'

const title = 'Hero Banner title'
</script>
<template>
  <HHeroBanner
    :title
    direction="vertical"
  >
    Description
    <template #image>
      <img src="./background.svg">
    </template>
  </HHeroBanner>
</template>

No Decoration

<script setup lang="ts">
import { HHeroBanner } from '@holistics/design-system'

const title = 'Hero Banner title'
</script>
<template>
  <HHeroBanner
    :title
    :decoration="false"
  >
    Description
    <template #image>
      <img src="./background.svg">
    </template>
  </HHeroBanner>
</template>

Buttons

<script setup lang="ts">
import { HHeroBanner } from '@holistics/design-system'

const title = 'Hero Banner title'
</script>
<template>
  <HHeroBanner
    :title
    button="Primary Button"
    secondary-button="Secondary Button"
  >
    Description
    <template #image>
      <img src="./background.svg">
    </template>
  </HHeroBanner>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
title *	string
dismissible	boolean = true
color	"white" | "blue" | "green" = "white"
decoration	boolean = true
direction	"vertical" | "horizontal" = "horizontal"
button	string
secondaryButton	string

Events

Name	Parameters	Description
@dismiss	[]
@primaryButtonClicked	[]
@secondaryButtonClicked	[]

Slots

Name	Scoped	Description
#default	{}
#buttons	{}
#image	{}