[row]
[one_fourth]
[panel type=»widgets» title=»Side Navigation» ][accordiongroup][accordion title=»Add-ons»][sidenav][sideitem link=»http://weblusive.com/epic/styling/alert-boxes/»]Alert Boxes[/sideitem][sideitem link=»http://weblusive.com/epic/styling/panels/»]Panels[/sideitem][sideitem link=»http://weblusive.com/epic/styling/pricing-tables/»]Pricing Tables[/sideitem][sideitem link=»http://weblusive.com/epic/styling/progress-bars/»]Progress bars[/sideitem][sideitem link=»http://weblusive.com/epic/styling/tables/»]Tables[/sideitem][sideitem link=»http://weblusive.com/epic/styling/thumbnails/»]Thumbnails[/sideitem][sideitem link=»http://weblusive.com/epic/styling/flex-video/»]Flex-video[/sideitem][/sidenav][/accordion][/accordiongroup][/panel]
[/one_fourth]

[three_fourth]

Alert Boxes

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They’ll conform to 100% of the container width you put them in.

[alert ]This is a standard alert (div.alert-box).[/alert][alert color=»success» type=»radius»]This is a success alert (div.alert-box.success.radius).[/alert][alert color=»alert» type=»round»]This is an alert (div.alert-box.alert.round).[/alert][alert color=»secondary» ]This is a secondary alert (div.alert-box.secondary).[/alert]
Building an alert using our predefined class is super-easy, you only need a block-level element with a class of .alert-box (we usually use a <div>). You may also include an anchor with a class of .close to create a close box.
[/three_fourth]
[/row]