Inline Alerts

Inline alerts are little cards with a specific styling and purpose. They are used where you might have prevously used the Bootstrap 3 alert class to make a light blue or light red box to house content you want to call attention to. These are slightly smaller than those, but they have built in icons and flow with the content a bit better than just a large blue box. They have four main configurable parts: icon, content, color, and size. All inline alerts are also dismissable by setting the close buttons data-dismiss attribute to inlinealert.

Icon

The left side of the inline alert can house any text, but is designed to house an icon glyph using font awesome. Any icon should work. Other content can work, but you may need to manually adjust spacing or sizing to make it fit and work inside the element. The left side will always take up 75px so the component generally needs at least 300 or so pixels to fit comfortably.

Content

The content consists of two parts, a title and a body. The title is optional, but is recommended and will automatically match the color of the inline alert without additional styling needed.

Color

The content consists of two parts, a title and a body. The title is optional, but is recommended and will automatically match the color of the inline alert without additional styling needed.

Sizing

When you want to put more than just a line or two in the alert, add the inlinealert-large class and the alert will have a bit more spacing and heading size to result in a more dominant page element.