Alert text
Simple (inline) text styling
Text only
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything else either. Link
I'm text-danger. I'm accessible too Link
Extra small icon
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything else either. Link
I'm text-danger. I'm accessible too Link
Small icon
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything else either. Link
I'm text-danger. I'm accessible too Link
Default icon
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything either. Link
I'm text-danger. I'm accessible too Link
Large icon
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything else either. Link
I'm text-danger. I'm accessible too Link
Extra large icon
I'm text-success. I'm accessible. Link
I'm text-info. I'm accessible. Please don't use me for anything else. Link
I'm text-warning. I'm accessible. Don't use me for anything else either. Link
I'm text-danger. I'm accessible too Link
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. Link
Information (with Extra large icon)
Heads up! This alert needs your attention, but it's not super important. Link
Warning
Warning! Better check yourself, you're not looking too good. Link
Danger
Oh snap! Change a few things up and try submitting again. Link
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. Link
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. Link
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. Link