[box type="custom-boxed-item" align="center" text_align="textcenter"]
[fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header]
These can be information, warning, error messages. But also, sometimes when you need a simple solution to contain some content to separate it from it's surroundings, or perhaps to set a width or alignment to content - the Box can be used for this (for more complex boxes use the [a href="/shortcodes/block" class="subtle-link"]Block[/a] shortcode). Check out these Box examples below.
[icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"]
[/box]
[section_break type="blank" margin_bottom="30" /]
[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Type"]
[fancy_header bold="1" type="style1"]Colored[/fancy_header]
[box][b]Theme Primary color[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Light colored[/fancy_header]
[box type="basic-light"][b]Theme Light color[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="basic-light"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Dark colored[/fancy_header]
[box type="basic-dark"][b]Theme Dark color[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="basic-dark"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Background blend[/fancy_header]
[box type="custom-boxed-item"][b]Theme background blend color[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="custom-boxed-item"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Blank[/fancy_header]
[box type="blank"][b]This is just blank[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="blank"]
...
[/box]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="Messages"]
[fancy_header bold="1" type="style1"]Information[/fancy_header]
[box type="info"][b]Information[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="info"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Warning[/fancy_header]
[box type="warning"][b]Warning[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="warning"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Error[/fancy_header]
[box type="error"][b]Error[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="error"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Success[/fancy_header]
[box type="success"][b]Success[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box type="success"]
...
[/box]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="Positioning"]
[fancy_header bold="1" type="style1"]Positioning[/fancy_header]
[box align="right" width="150px" convert="cvt-phone-ptr"][b]On the right[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box][p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[section_break type="blank" margin_bottom="0" /]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box align="right" width="150px" convert="cvt-phone-ptr"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Left[/fancy_header]
[box align="left" width="150px" convert="cvt-phone-ptr"][b]On the left[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box][p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[section_break type="blank" margin_bottom="0" /]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[box align="left" width="150px" convert="cvt-phone-ptr"]
...
[/box]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Center[/fancy_header]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[box align="center" width="150px" convert="cvt-phone-ptr"][b]Centered[/b] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [/box]
[p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/p]
[accordion style="plain inline"]
[accordion_toggle title="Get code"]
[box align="center" width="150px" convert="cvt-phone-ptr"]
...
[/box]
[/accordion_toggle]
[/accordion]
[/tab]
[/tabs]
