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

Defaults

Large size

With border & no shadow

1import { Banner } from '@sugarcoat/ui';
2
3<Banner size='sm'>
4  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
5</Banner>
6
7<Banner>
8  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
9</Banner>
10
11<Banner size='lg'>
12  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
13</Banner>
14
15<Banner border='solid' shadow='none'>
16  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
17</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.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius