⇠ Back to the GUI source list

Testing alerts v3.0.0 STG

Text

Simple (inline) text styling

Text only

I'm text-success. I'm accessible.

I'm text-info. I'm accessible. Please don't use me for anything else.

I'm text-warning. I'm accessible. Don't use me for anything else either.

I'm text-danger. I'm accessible too

Small icon

I'm text-success. I'm accessible.
I'm text-info. I'm accessible. Please don't use me for anything else.
I'm text-warning. I'm accessible. Don't use me for anything else either.
I'm text-danger. I'm accessible too

Default icon

I'm text-success. I'm accessible.
I'm text-info. I'm accessible. Please don't use me for anything else.
I'm text-warning. I'm accessible. Don't use me for anything either.
I'm text-danger. I'm accessible too

Large icon

I'm text-success. I'm accessible.
I'm text-info. I'm accessible. Please don't use me for anything else.
I'm text-warning. I'm accessible. Don't use me for anything else either.
I'm text-danger. I'm accessible too

Extra large icon

I'm text-success. I'm accessible.
I'm text-info. I'm accessible. Please don't use me for anything else.
I'm text-warning. I'm accessible. Don't use me for anything else either.
I'm text-danger. I'm accessible too

Alert

Structured (block) alert box without icon text wrapping (maintains left text edge). All examples use Small icons in XS.

Success (note text wrapping in XS)

Information (with Extra large icon)

Warning

Danger

System

Success (without close button)

Success (without close button or icon)


Alerts in forms

Default

This should not show (until `.has-*` added to parent).

Success

Success! We can approve this amount.

Success (with icon)

t

Success! We can approve this amount.

Information

Info! At least 10 characters

Warning

Warning! Are you sure this is your name?

Danger

Danger! Your email address has an error in it.

We can approve this amount.

We can approve this amount.