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

Default size

Large size

1import { Banner, FlexBox } from '@sugarcoat/ui';
2
3<FlexBox direction='column' gap='3'>
4  <Banner size='sm'>
5    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
6  </Banner>
7
8  <Banner>
9    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
10  </Banner>
11
12  <Banner size='lg'>
13    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
14  </Banner>
15</FlexBox>
16

API Reference

Component	Description
Banner	A versatile banner component that supports various styles, sizes, and visual states. Perfect for highlighting important information or messages.

Component Properties

Banner

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the Banner.
`color`	`string`	default	The color scheme of the Banner.
`border`	`string`	solid	The border style of the Banner.
`shadow`	`string`	sm	The shadow size of the Banner.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius