components
Banner
v.1.0.0 | Saturn
StorybookUsage
import { Banner } from '@kubit-ui-web/react-components'
12345678910
<Banner
align='LEFT'
image={{
[DeviceBreakpointsType.DESKTOP]: 'DESKTOP_IMAGE',
[DeviceBreakpointsType.TABLET]: 'TABLET_IMAGE',
[DeviceBreakpointsType.MOBILE]: 'MOBILE_IMAGE'
}}
title={{content: 'Title lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor ad'}}
variant='PRIMARY'
/>Props
Let's delve into the versatility of the banner component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
align Required | String | - | Banner align |
| backgroundPosition | String | '50% 50%' | Property associated with the css prop background-position for the image |
| button | BannerButtonType | - | Object with button properties |
| dataTestId | String | - | String used for testing |
| description | BannerDescriptionType | - | Object with description properties |
image Required | ImagesType | - | Image of the banner |
| imageAltText | String | - | Alt text image |
| onClick | React.MouseEventHandler | - | The event occurs when the user clicks on the element |
| pill | BannerPillType | - | Object with pill properties |
| tag | BannerTagType | - | Object with tag properties |
title Required | BannerTitleType | - | Object with title properties |
variant Required | String | PRIMARY | Banner variant. There are two options: PRIMARY and ALTERNATIVE |
| ctv | Object | - | Object used for update variant styles |
Types
BannerButtonType
BannerButtonType is a type that contains the following properties:
- variant: string:
- size: string:
- disabled?: string:
- content: string:
BannerDescriptionType
BannerDescriptionType is a type that contains the following properties:
- children: React.ReactNode:
- component?: TextComponentType | GenericLinkType:
- dataTestId?: string:
- htmlFor?: string:
- id?: string:
- onClick?: React.MouseEventHandler:
- role?: React.AriaRole:
- color?: string:
- display?: TextDisplayType:
- decoration?: TextDecorationType:
- cursor?: string:
- weight?: number:
- target?: string:
- align?: string:
- transform?: TextTransformType:
- url?: string:
- draggable?: boolean:
- variant?: string:
- content: string:
BannerPillType
BannerPillType is a type that contains the following properties:
- initialState?: boolean:
- focus?: boolean:
- content: string:
BannerTagType
BannerTagType is a type that contains the following properties:
- children: React.ReactNode:
- variantStatusStyles?: TagStylesVariantPropsType:
- optionStyles: TagStylesOptionPropsType;
- dataTestId?: string:
- icon?: IElementOrIcon:
- variant: string:
- truncateText?: boolean:
- option: string:
- status: string:
- content: string:
BannerTitleType
BannerTitleType is a type that contains the following properties:
- children: React.ReactNode:
- component?: TextComponentType | GenericLinkType:
- dataTestId?: string:
- htmlFor?: string:
- id?: string:
- onClick?: React.MouseEventHandler:
- role?: React.AriaRole:
- color?: string:
- display?: TextDisplayType:
- decoration?: TextDecorationType:
- cursor?: string:
- weight?: number:
- target?: string:
- align?: string:
- transform?: TextTransformType:
- url?: string:
- draggable?: boolean:
- variant?: string:
- content: string: