Banner
The banner component
Importing
ts
import "@tapsioss/web-components/banner";ts
import { Banner } from "@tapsioss/react-components/Banner";Component Usage
html
<tapsi-banner></tapsi-banner>tsx
<Banner />Properties
| Name | Description | Type | Default Value |
|---|---|---|---|
heading | The heading text to display in the banner. | string | - |
description | The description text to display in the banner. | string | - |
image | The URL of the background image to display in the banner. | string | - |
variant | The variant style of the banner. | "default" | "hero" | - |
background-color | The background color of the banner. | string | - |
text-color | The text color of the banner. | string | - |
Slots
| Name | Description |
|---|---|
| - | The default slot to render extra elements when variant is hero. |
action | The slot for action element. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/banner";
console.log(Slots.DEFAULT); // ""
console.log(Slots.ACTION); // "action"ts
import { BannerSlots } from "@tapsioss/react-components";
console.log(BannerSlots.DEFAULT); // ""
console.log(BannerSlots.ACTION); // "action"