Alert and Info boxes are very similar, but have a couple of differences. Alerts are a newer element to the framework that was added with the addition of Bootstrap. However, info boxes provide a slightly different effect and look; they’ve been around in the framework since the beginning, and so we wanted to make sure and keep them for any buyers still using these features.
So, take your pick! What’s it going to be? Alerts or info boxes?
Alerts
Alerts have been added with the framework’s addition of Bootstrap. Use them to relay some important information within your content without attracting as much attention as the info boxes.
General Usage
[alert style="info" close="true"]<strong>Hey, you!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/alert]
Options
Optional arguments - style: info, success, danger, warning - close: Show close button or not - true, false
Basic Styles
[raw][alert style="info"]This is an "info" alert.[/alert][alert style="success"]This is a "success" alert.[/alert][alert style="danger"]This is a "danger" alert.[/alert][alert style="warning"]This is a "warning" alert.[/alert][/raw]
Adding “Close” Buttons
[raw][alert style="info" close="true"]This is an "info" alert that can be closed.[/alert][alert style="success" close="true"]This is a "success" alert that can be closed.[/alert][alert style="danger" close="true"]This is a "danger" alert that can be closed.[/alert][alert style="warning" close="true"]This is a "warning" alert that can be closed.[/alert][/raw] [divider]
Info Boxes
Info boxes used to take on a specific style that had an associated icon, however we’ve changed this as of v2.2 of our framework. You can now associate the style with a certain color, and then optionally insert any FontAwesome icon.
General Usage
[box style=”red” icon=”star”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box][box style="red" icon="star"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box]
[box style="green"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box]
Options
Optional arguments - style: blue, green, grey, orange, purple, red, teal, yellow (view colors) - icon: Optional icon in upper left corner (view icons)
Colors
| Color | Example |
|---|---|
| blue | [box style=”blue”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| green | [box style=”green”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| grey | [box style=”grey”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| orange | [box style=”orange”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| purple | [box style=”purple”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| red | [box style=”red”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| teal | [box style=”teal”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |
| yellow | [box style=”yellow”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[/box] |