Banner

The primary purpose of a banner component is to capture the attention of the user, convey important information, promote a specific message, or highlight a key feature or call to action.

Usage

Code Editor
Copy
import { Banner } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { BannerThemeProps, BannerBorderProps, BannerShapeProps } from '@erudilabs/alma'
BannerThemeProps = 'default' | 'primary' | 'danger' | 'success' | 'warning'
BannerShapeProps = 'flat' | 'square' 
BannerBorderProps = 'full' | 'top' | 'right' | 'bottom' | 'left' | 'none'

Component

Here preview and detail explain of Banner component


Default

The more complete your profile, the closer your chance to get paid monthly education fees!
Code Editor
Copy
<Banner>The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Theme

These themes allow you to apply different visual styles to the Banner, Whether it's indicating different statuses, categories, or providing visual cues, the ability to customize Banner themes adds flexibility and enhances the visual appeal of your UI components.


The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!


Primary
Code Editor
Copy
<Banner theme="primary">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Danger
Code Editor
Copy
<Banner theme="danger">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Warning
Code Editor
Copy
<Banner theme="warning">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Success
Code Editor
Copy
<Banner theme="success">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Shape

Prop allows you to specify the shape of the banner. It can be set as circle for a circular banner or rounded for a banner with rounded corners.


The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!


Flat
Code Editor
Copy
<Banner theme="success" shape="flat">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Square
Code Editor
Copy
<Banner theme="success" shape="square">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Border

Prop allows you to specify the border of the banner.


Full
Code Editor
Copy
<Banner shape="flat" border="full">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Top
Code Editor
Copy
<Banner shape="flat" border="top">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Code Editor
Copy
<Banner shape="flat" border="right">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Bottom
Code Editor
Copy
<Banner shape="flat" border="bottom">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Left
Code Editor
Copy
<Banner shape="flat" border="left">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

None
Code Editor
Copy
<Banner shape="flat" border="none">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Inline block

The more complete your profile, the closer your chance to get paid monthly education fees!
Code Editor
Copy
<Banner theme="primary" block={false}>The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

With icon

These themes allow you to apply an Icon, we have standardization icons


The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!
The more complete your profile, the closer your chance to get paid monthly education fees!


Icon primary
Code Editor
Copy
<Banner withIcon theme="primary">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Icon danger
Code Editor
Copy
<Banner withIcon theme="danger">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Icon warning
Code Editor
Copy
<Banner withIcon theme="warning">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Icon success
Code Editor
Copy
<Banner withIcon theme="success">The more complete your profile, the closer your chance to get paid monthly education fees!</Banner>

Props Reference

Prop
Type

id?

string

testId?

string

className?

string

children

ReactNode

theme?

BannerThemeProps

border?

BannerBorderProps

shape?

BannerShapeProps

block?

boolean

withIcon?

boolean