[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]
Here is a useful shortcode to create vertical lines in many different styles. You can add other shortcodes inside, like icons or headings. They can also be used for simply creating blank space to separate other elements. Examples below.
[icon icon="fas 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" /]
[fancy_header bold="1"]Line[/fancy_header]
[section_break type="line" /]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Add button inside[/fancy_header]
[section_break type="line-lrg"][button icon="far fa-lightbulb" size="med" radius="big-corners" position="center" custom_margin="1"]Button [/button][/section_break]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line-lrg"][button icon="far fa-lightbulb" size="med" radius="big-corners" position="center" custom_margin="1"[/button][/section_break]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Add icon inside[/fancy_header]
[section_break type="line-lrg"][icon icon="fas fa-globe-europe" font_size="44" position="center"][/section_break]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line-lrg"][icon icon="fas fa-globe-europe" font_size="44" position="center"][/section_break]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Large line[/fancy_header]
[section_break type="line-lrg"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line-lrg" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Primary color[/fancy_header]
[section_break type="line-prime"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line-prime" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Large primary color[/fancy_header]
[section_break type="line-lrg-prime"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="line-lrg-prime" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Light diagonal lines[/fancy_header]
[h4 class="italic"]Inside a Dark Box, so you can see it.[/h4]
[box type="basic-dark"]
[section_break type="diagonal"/]
[/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="diagonal" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Dark diagonal lines[/fancy_header]
[section_break type="diagonal-dark"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="diagonal-dark" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Light indent[/fancy_header]
[h4 class="italic"]Inside a Dark Box, so you can see it.[/h4]
[box type="basic-dark"]
[section_break type="indent-light"/]
[/box]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="indent-light" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Dark indent[/fancy_header]
[section_break type="indent-dark"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break type="indent-dark" /]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" margin_top="80"]Or create extra blank space[/fancy_header]
[section_break bottom_margin="60px" type="blank"/]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[section_break bottom_margin="60px" type="blank" /]
[/accordion_toggle]
[/accordion]
