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)
Well done! You successfully read this important alert message.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolor provident quasi nisi officia tempore fuga autem, animi iste molestiae, qui omnis
doloribus aliquid ipsam rem fugiat veniam voluptatem accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, unde quis, molestias nisi
quae voluptates nemo quaerat nihil, consequuntur nobis ratione rerum asperiores eveniet dicta maiores quia nostrum. Pariatur, natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magnam illum harum consequatur, quo sunt impedit quam minus eaque saepe voluptas
corrupti voluptatum, sapiente dolor sequi tempore maxime? Neque, obcaecati.
Information (with Extra large icon)
Heads up! This alert needs your attention, but it's not super important.
Warning
Warning! Better check yourself, you're not looking too good.
Danger
Oh snap! Change a few things up and try submitting again.
Danger (with heading)
Please fix the 4 errors listed below
System
System Error 8942: The server is no responding. Please try again later. Sorry for the inconvenience.
Success (without close button)
Well done! You successfully read this important alert message.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolor provident quasi nisi officia tempore fuga autem, animi iste molestiae, qui omnis
doloribus aliquid ipsam rem fugiat veniam voluptatem accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, unde quis, molestias nisi
quae voluptates nemo quaerat nihil, consequuntur nobis ratione rerum asperiores eveniet dicta maiores quia nostrum. Pariatur, natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magnam illum harum consequatur, quo sunt impedit quam minus eaque saepe voluptas
corrupti voluptatum, sapiente dolor sequi tempore maxime? Neque, obcaecati.
Success (without close button or icon)
Well done! You successfully read this important alert message.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolor provident quasi nisi officia tempore fuga autem, animi iste molestiae, qui omnis
doloribus aliquid ipsam rem fugiat veniam voluptatem accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, unde quis, molestias nisi
quae voluptates nemo quaerat nihil, consequuntur nobis ratione rerum asperiores eveniet dicta maiores quia nostrum. Pariatur, natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, magnam illum harum consequatur, quo sunt impedit quam minus eaque saepe voluptas
corrupti voluptatum, sapiente dolor sequi tempore maxime? Neque, obcaecati.