flowbite-svelte 0.44.7 → 0.44.9

package/src/routes/docs/components/avatar.md

@@ -0,0 +1,215 @@
+---
+layout: componentLayout
+title: Svelte Avatar - Flowbite
+breadcrumb_title: Svelte Avatar
+component_title: Avatar
+dir: Components
+description: Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'Avatar, Placeholder'
+  let name;
+</script>
+
+The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
+
+## Setup
+
+Import `Avatar`. If you are using the user dropdown, import `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownDivider`. If you are using tooltip for avatar import `Tooltip`.
+
+```svelte example hideOutput
+<script>
+  import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownDivider, Tooltip } from 'flowbite-svelte';
+</script>
+```
+
+## Default avatar
+
+Use this example to create a circle and rounded avatar on an image element.
+
+```svelte example class="flex justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<div class="flex space-x-4">
+  <Avatar src="/images/profile-picture-2.webp" />
+  <Avatar src="/images/profile-picture-2.webp" rounded />
+</div>
+```
+
+## Bordered
+
+You can apply a border around the avatar component.
+
+If you can use the `ring-&#123;color&#125;` class from Tailwind CSS to modify ring color.
+
+```svelte example class="flex justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<Avatar src="/images/profile-picture-2.webp" border />
+<Avatar src="/images/profile-picture-2.webp" border class="ring-red-400 dark:ring-red-300" />
+```
+
+## Placeholder
+
+When there is no custom image available a placeholder is displayed.
+
+```svelte example class="flex justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<Avatar />
+<Avatar rounded />
+<Avatar border />
+<Avatar rounded border />
+```
+
+## Placeholder initials
+
+This example can be used to show the initials of the user’s first and last name as a placeholder when no profile picture is available.
+
+```svelte example class="flex justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<Avatar>JL</Avatar>
+```
+
+## Avatar tooltip
+
+Use this example to show a tooltip when hovering over the avatar.
+
+```svelte example class="flex justify-center gap-4"
+<script>
+  import { Avatar, Tooltip } from 'flowbite-svelte';
+</script>
+
+<Avatar data-name="Jese Leos" rounded src="/images/profile-picture-1.webp" />
+<Avatar data-name="Robert Gouth" rounded src="/images/profile-picture-2.webp" />
+<Avatar data-name="Bonnie Green" rounded src="/images/profile-picture-3.webp" />
+<Tooltip triggeredBy="[data-name]" on:show={(e) => (name = e.target.dataset.name)}>{name}</Tooltip>
+```
+
+## Dot indicator
+
+Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
+
+```svelte example class="flex justify-center gap-4"
+<script>
+  import { Avatar, Indicator } from 'flowbite-svelte';
+</script>
+
+<Avatar src="/images/profile-picture-3.webp" dot={{ color: 'red' }} />
+<Avatar src="/images/profile-picture-3.webp" dot={{ placement: 'top-right', color: 'red' }} rounded />
+<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right', color: 'green' }} />
+<Avatar src="/images/profile-picture-5.webp" dot={{ placement: 'bottom-right' }} rounded />
+
+<Avatar dot={{}} />
+```
+
+## Stacked
+
+Use this example if you want to stack a group of users by overlapping the avatar components.
+
+```svelte example class="flex flex-col justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<div class="flex mb-5">
+  <Avatar src="/images/profile-picture-1.webp" stacked />
+  <Avatar src="/images/profile-picture-2.webp" stacked />
+  <Avatar src="/images/profile-picture-3.webp" stacked />
+  <Avatar stacked />
+</div>
+<div class="flex">
+  <Avatar src="/images/profile-picture-1.webp" stacked />
+  <Avatar src="/images/profile-picture-2.webp" stacked />
+  <Avatar src="/images/profile-picture-3.webp" stacked />
+  <Avatar stacked href="/" class="bg-gray-700 text-white hover:bg-gray-600 text-sm">+99</Avatar>
+</div>
+```
+
+## Avatar text
+
+This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date.
+
+```svelte example class="flex justify-center gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<div class="flex items-center space-x-4">
+  <Avatar src="/images/profile-picture-1.webp" rounded />
+  <div class="space-y-1 font-medium dark:text-white">
+    <div>Jese Leos</div>
+    <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
+  </div>
+</div>
+```
+
+## User dropdown
+
+Use this example if you want to show a dropdown menu when clicking on the avatar component.
+
+```svelte example class="flex justify-center h-96"
+<script>
+  import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownDivider } from 'flowbite-svelte';
+</script>
+
+<Avatar id="user-drop" src="/images/profile-picture-3.webp" class="cursor-pointer" dot={{ color: 'green' }} />
+<Dropdown triggeredBy="#user-drop">
+  <DropdownHeader>
+    <span class="block text-sm">Bonnie Green</span>
+    <span class="block truncate text-sm font-medium">name@flowbite.com</span>
+  </DropdownHeader>
+  <DropdownItem>Dashboard</DropdownItem>
+  <DropdownItem>Settings</DropdownItem>
+  <DropdownItem>Earnings</DropdownItem>
+  <DropdownDivider />
+  <DropdownItem>Sign out</DropdownItem>
+</Dropdown>
+```
+
+## Sizes
+
+Select size from xs | sm | md | lg | xl.
+
+```svelte example class="flex flex-col gap-4" hideScript
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<div class=" flex flex-wrap justify-center space-x-4">
+  <Avatar src="/images/profile-picture-3.webp" rounded size="xs" />
+  <Avatar src="/images/profile-picture-3.webp" rounded size="sm" />
+  <Avatar src="/images/profile-picture-3.webp" rounded size="md" />
+  <Avatar src="/images/profile-picture-3.webp" rounded size="lg" />
+  <Avatar src="/images/profile-picture-3.webp" rounded size="xl" />
+</div>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Avatar styling
+
+- Use the `class` prop to overwrite the default class.
+- Use the `classPlaceholder` prop to overwrite the placeholder class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Avatar](https://flowbite.com/docs/components/avatar/)

package/src/routes/docs/components/badge.md

@@ -0,0 +1,269 @@
+---
+layout: componentLayout
+title: Svelte Badge - Flowbite
+breadcrumb_title: Svelte Badge
+component_title: Badge
+dir: Components
+description: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components
+thumnailSize: w-28
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  import componentData1 from '../../component-data/Badge.json'
+  const components = 'Badge'
+</script>
+
+The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.
+
+Alternatively, badges can also be used as standalone elements that link to a certain page.
+
+## Setup
+
+Import a badge component in the script tag.
+
+```svelte example hideOutput
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+```
+
+## Default badge
+
+Use the following badge elements to indicate counts or labels inside or outside components.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge>Default</Badge>
+<Badge color="dark">Dark</Badge>
+<Badge color="red">Red</Badge>
+<Badge color="green">Green</Badge>
+<Badge color="yellow">Yellow</Badge>
+<Badge color="indigo">Indigo</Badge>
+<Badge color="purple">Purple</Badge>
+<Badge color="pink">Pink</Badge>
+```
+
+## Large badges
+
+Use the `large` prop to create a large variant of the badges.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge large>Default</Badge>
+<Badge large color="dark">Dark</Badge>
+<Badge large color="red">Red</Badge>
+<Badge large color="green">Green</Badge>
+<Badge large color="yellow">Yellow</Badge>
+<Badge large color="indigo">Indigo</Badge>
+<Badge large color="purple">Purple</Badge>
+<Badge large color="pink">Pink</Badge>
+```
+
+## Bordered badge
+
+Use the `border` prop to add a border accent to the badge component.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge border>Default</Badge>
+<Badge border color="dark">Dark</Badge>
+<Badge border color="red">Red</Badge>
+<Badge border color="green">Green</Badge>
+<Badge border color="yellow">Yellow</Badge>
+<Badge border color="indigo">Indigo</Badge>
+<Badge border color="purple">Purple</Badge>
+<Badge border color="pink">Pink</Badge>
+```
+
+## Pills badge
+
+Use the `rounded` prop to make the corners even more rounded like pills for the badge component.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge rounded>Default</Badge>
+<Badge rounded color="dark">Dark</Badge>
+<Badge rounded color="red">Red</Badge>
+<Badge rounded color="green">Green</Badge>
+<Badge rounded color="yellow">Yellow</Badge>
+<Badge rounded color="indigo">Indigo</Badge>
+<Badge rounded color="purple">Purple</Badge>
+<Badge rounded color="pink">Pink</Badge>
+```
+
+## Badges as links
+
+You can also use badges as anchor elements to link to another page.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge href="/">Badge link</Badge>
+<Badge href="/" large>Badge link</Badge>
+<Badge href="/" border>Badge link</Badge>
+<Badge href="/" rounded>Badge link</Badge>
+```
+
+## Badges with icon
+
+You can also use SVG icons inside the badge elements.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Badge } from 'flowbite-svelte';
+  import { ClockSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Badge color="dark" border>
+  <ClockSolid class="w-2.5 h-2.5 mr-1.5" />
+  3 days ago
+</Badge>
+<Badge border>
+  <ClockSolid class="text-primary-800 dark:text-primary-400 w-2.5 h-2.5 mr-1.5" />
+  2 minutes ago
+</Badge>
+```
+
+## Notification badge
+
+To achive the functionality of the notification badge, use the sibling [`Indicator`](/docs/components/indicators) component. Remember to add the `relative` class to parent element.
+
+```svelte example class="flex flex-wrap gap-4"
+<script>
+  import { Button, Indicator } from 'flowbite-svelte';
+  import { EnvelopeSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Button class="relative" size="sm">
+  <EnvelopeSolid class="text-white dark:text-white" />
+  <span class="sr-only">Notifications</span>
+  <Indicator color="blue" border size="xl" placement="top-right" class="text-xs font-bold">18</Indicator>
+</Button>
+
+<Button class="relative" size="sm">
+  <EnvelopeSolid class="text-white dark:text-white" />
+  <span class="sr-only">Notifications</span>
+  <Indicator color="red" border size="xl" placement="top-right" class="text-xs font-bold">20</Indicator>
+</Button>
+
+<Button class="relative" size="sm">
+  <EnvelopeSolid class="text-white dark:text-white" />
+  <span class="sr-only">Notifications</span>
+  <Indicator color="dark" border size="xl" placement="bottom-right" class="text-xs font-bold">20</Indicator>
+</Button>
+```
+
+## Button with badge
+
+Use this example to add a badge inside a button component for a count indicator.
+
+```svelte example class="flex flex-wrap gap-4"
+<script>
+  import { Badge, Button } from 'flowbite-svelte';
+</script>
+
+<Button>
+  Messages
+  <Badge rounded class="w-4 h-4 ml-2 p-0 font-semibold text-primary-800 bg-white dark:text-primary-800 dark:bg-white">2</Badge>
+</Button>
+```
+
+## Badge with icon only
+
+Alternatively you can also use badges which indicate only a SVG icon.
+
+```svelte example hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+  import { CheckOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Badge color="dark" rounded large class="!p-1 !font-semibold">
+  <CheckOutline class="h-3 w-3" />
+  <span class="sr-only">Icon description</span>
+</Badge>
+<Badge rounded large class="!p-1 !font-semibold">
+  <CheckOutline class="h-3 w-3 text-primary-800 dark:text-primary-400" />
+  <span class="sr-only">Icon description</span>
+</Badge>
+```
+
+## Dismissable badges
+
+Use the `dimissable` prop to dismiss the current badge.
+
+```svelte example class="flex flex-wrap gap-4" hideScript
+<script>
+  import { Badge } from 'flowbite-svelte';
+</script>
+
+<Badge dismissable large>Default</Badge>
+<Badge dismissable large color="dark">Dark</Badge>
+<Badge dismissable large color="red">Red</Badge>
+<Badge dismissable large color="green">Green</Badge>
+<Badge dismissable large color="yellow">Yellow</Badge>
+<Badge dismissable large color="indigo">Indigo</Badge>
+<Badge dismissable large color="purple">Purple</Badge>
+<Badge dismissable large color="pink">Pink</Badge>
+```
+
+Use the `close-button` slot to add your desired button. Don't forget to use the slot prop `close` to dismiss your badge.
+
+```svelte example class="gap-4"
+<script>
+  import { Badge } from 'flowbite-svelte';
+  import { CloseCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Badge dismissable>
+  Default
+  <button slot="close-button" let:close on:click={close} type="button" class="inline-flex items-center rounded-full p-0.5 my-0.5 ml-1.5 -mr-1.5 text-sm bg-primary-500 dark:bg-primary-400 text-white dark:text-primary-800 hover:bg-primary-900 hover:text-white dark:hover:bg-red-900 dark:hover:text-yellow-300" aria-label="Remove">
+    <CloseCircleSolid class="h-4 w-4" />
+    <span class="sr-only">Remove badge</span>
+  </button>
+</Badge>
+```
+
+A `dismiss` event will be dispatched during the dismissal, listen to it if needed.
+
+```svelte example class="gap-4"
+<script>
+  import { Badge } from 'flowbite-svelte';
+
+  function handleClose(event) {
+    alert('Badge dismissed');
+  }
+</script>
+
+<Badge dismissable large on:close={handleClose}>Default</Badge>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Badge styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Badge](https://flowbite.com/docs/components/badge/)

package/src/routes/docs/components/banner.md

@@ -0,0 +1,166 @@
+---
+layout: componentLayout
+title: Svelte Sticky Banner - Flowbite
+breadcrumb_title: Svelte Sticky Banner
+component_title: Banner
+dir: Components
+description: Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  const components = 'Banner'
+</script>
+
+Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.
+
+Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Banner } from 'flowbite-svelte';
+</script>
+```
+
+## Default sticky banner
+
+Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { BullhornSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="py-4" />
+
+<Banner id="default-banner" position="absolute">
+  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
+    <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
+      <BullhornSolid class="w-3 h-3 text-gray-500 dark:text-gray-400" />
+      <span class="sr-only">Light bulb</span>
+    </span>
+    <span>
+      New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-primary-600 underline dark:text-primary-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline"> Flowbite Library </a>
+    </span>
+  </p>
+</Banner>
+```
+
+## Bottom banner position
+
+This example can be used to position the sticky banner to the bottom side of the page instead of the top side.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { SalePercentSolid, ArrowRightSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="py-4" />
+
+<Banner id="bottom-banner" position="absolute" bannerType="bottom">
+  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
+    <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
+      <SalePercentSolid class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+      <span class="sr-only">Discount coupon</span>
+    </span>
+    <span>
+      Get 5% commission per sale <a href="https://flowbite.com" class="flex items-center ml-0 text-sm font-medium text-primary-600 md:ml-1 md:inline-flex dark:text-primary-500 hover:underline">
+        Become a partner <ArrowRightSolid class="w-3 h-3 ml-2" />
+      </a>
+    </span>
+  </p>
+</Banner>
+```
+
+## Marketing CTA banner
+
+Use this free example to show a text message for announcement with a CTA link.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="py-4" />
+
+<Banner id="cta-banner" position="absolute" bannerType="cta">
+  <a href="https://flowbite-svelte.com/" class="flex items-center mb-2 border-gray-200 md:pr-4 md:mr-4 md:border-r md:mb-0 dark:border-gray-600">
+    <img src="https://flowbite-svelte.com/images/flowbite-svelte-icon-logo.svg" class="h-6 mr-2" alt="Flowbite Logo" />
+    <span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
+  </a>
+  <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">Build websites even faster with components on top of Tailwind CSS</p>
+</Banner>
+```
+
+## Newsletter sign-up banner
+
+This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="py-4" />
+
+<Banner id="signup-banner" position="absolute" bannerType="signup">
+  <form action="/" class="flex flex-col items-center w-full md:flex-row">
+    <label for="email" class="flex-shrink-0 mb-2 mr-auto text-sm font-medium text-gray-500 md:mb-0 md:mr-4 dark:text-gray-400 md:m-0"> Sign up for our newsletter </label>
+    <input type="email" id="email" placeholder="Enter your email" class="bg-white border border-gray-300 text-gray-900 md:w-64 mb-2 md:mb-0 md:mr-4 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required />
+    <button type="submit" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"> Subscribe </button>
+  </form>
+</Banner>
+```
+
+## Informational banner
+
+This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.
+
+```svelte example class="flex flex-col relative"
+<script>
+  import { Banner, Skeleton, ImagePlaceholder } from 'flowbite-svelte';
+  import { OpenBookSolid, ArrowRightSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Skeleton class="py-4" />
+<ImagePlaceholder class="py-4" />
+
+<Banner id="info-banner" position="absolute" bannerType="info">
+  <div slot="header" class="mb-4 md:mb-0 md:mr-4">
+    <h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
+    <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">You can integrate Flowbite with many tools.</p>
+  </div>
+  <a href="/" class="inline-flex items-center px-3 py-2 mr-3 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+    <OpenBookSolid class="w-3 h-3 mr-2" />
+    Learn more
+  </a>
+  <a href="/" class="inline-flex px-3 py-2 mr-2 text-xs font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
+    Get started <ArrowRightSolid class="w-3 h-3 ml-2" />
+  </a>
+</Banner>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Banner styling
+
+- Use the `classDiv` prop to overwrite `divClass`.
+- Use the `classInner` prop to overwrite `innerClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Banner](https://flowbite.com/docs/components/banner/)