Foundations
Components
- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Banner
Have something big to say? Do it in style with our Banner. Great for spotlighting essential details with a hint of flair
Example
Small size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
Default size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
Large size
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
With border & no shadow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
1import { Banner } from '@haktos/sugarcoat-ui';23<Banner size='sm'>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam5</Banner>67<Banner>8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam9</Banner>1011<Banner size='lg'>12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam13</Banner>1415<Banner border shadow={false}>16 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam17</Banner>18
Component Properties
Banner
| Prop | Type | Default | Explanation |
|---|---|---|---|
size | enum | md | There are 3 sizes available - small, medium and large. |
color | enum | default | The color of the Banner component. |
border | boolean | false | Add border to the Banner component. |
shadow | boolean | true | Add shadow to the Banner component. |