Alerts

Alerts are used to quickly grab user attention.

Default

Alert by default is just a rounded box.

<div class="alert">This is a alert</div>

This is a alert

Alert can have multiple paragraph nested inside it.

I don't hate you

I just don't like that you exist

Colors

Add .alert-danger ,.alert-success and other classes to emphasize the message.

<div class="alert alert-danger label font-medium">This is a danger alert.</div>
<div class="alert alert-warning label font-medium">This is a warning alert.</div>
<div class="alert alert-success label font-medium">This is a success alert.</div>

This is a danger alert.

This is a warning alert.

This is a info alert.

This is a success alert.

This is a primary alert.

This is a secondary alert.

This is a tertiary.

This is a neutal alert.

This is a white alert.

This is a black alert.

Stripe

Stripe alerts can be used as banners. By default stripe is on the left side.

Use alert-stripe--top, alert-stripe--right and alert-stripe--bottom for different sides.

<div class="alert alert-stripe alert-danger label font-medium">New update</div>
<div class="alert alert-stripe--top alert-warning label font-medium">Deprication Notice</div>

Offcourse

SIZE matters.

Nobody wants

A small cup of coffee.

With Icons

You can also create alerts with icons. You may need to add extra utility classes.

<div class="alert alert-stripe alert-success label font-medium">
	<div class="font-bold d-flex flex-items-center gap-2">
		<span class="icon label-xl">
			<i class="ri-lightbulb-line"></i>
		</span>
		<span>DID YOU KNOW?</span>
	</div>
	<p>90% of Rick and Morty fanboys think they're Rick.</p>
	<p>... when in reality they're Jerry.</p>
</div>

DID YOU KNOW?

90% of Rick and Morty fanboys think they're Rick.
... when in reality they're Jerry.

With Actions

Alert can have action buttons.

<div class="alert alert-stripe alert-info label font-medium d-flex flex-items-center">
	<span>I am a writer. My hobbies include not writing.</span>
	<button type="button" aria-label="close" class="btn btn-icon fg-info--ultra ml-auto">
		<span class="icon label-lg">
			<i class="ri-close-line"></i>
		</span>
	</button>
</div>

<div class="alert alert-stripe alert-warning label font-medium d-flex flex-items-center">
	<span>Beam Me Up, Scotty</span>
	<button type="button" aria-label="close" class="btn btn-warning ml-auto">
		Start Transmission
	</button>
</div>

I am a writer. My hobbies include not writing.

Beam Me Up, Scotty

Variations

With help of utilites multiple variations of alert can be made.

<div class="alert alert-danger rounded-none label font-medium">Alert without rounded borders</div>
<div class="alert alert-success border-0 label font-medium">Alert without border</div>
<div class="alert alert-info bg-transparent label font-medium">Alert with no money</div>

Alert without rounded borders

Alert without border

Alert with no money