Banner

Stable

A conatiner including some info, warnings, errors or success messages.

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <HBanner
      v-for="type in BANNER_TYPES"
      :key="type"
      title="This is an info banner"
      theme="inline"
      :type="type"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </HBanner>
  </div>
</template>

Examples

Full Width

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

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <HBanner
      v-for="type in BANNER_TYPES"
      :key="type"
      title="This is an info banner"
      theme="full-width"
      :type="type"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </HBanner>
  </div>
</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
type *	"info" | "warning" | "danger" | "success" | "neutral"
theme	"inline" | "full-width" = "inline"
title	string
description	string
hideIcon	boolean
dismissible	boolean
button	string | ButtonPropsPreTyped

Events

Name	Parameters	Description
@buttonClick	[e: MouseEvent]
@dismiss	[]

Slots

Name	Scoped	Description
#header	any
#default	any