⇠ Back to the GUI source list

Testing alerts v4.0.0 WBG

Alert 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

Extra 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

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 box

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

Danger (with heading)

System

Success (without close button)

Success (without close button or icon)