Breakout Content – Shortcode

Often times, you’ll have some special content that you’d stand out a little more. One trend is to “break out” of the main content container and display it full-width. Typically, in order to do this you’d have to close all open elements, add your markup and then reopen everything all over again. The [ssc]

[/ssc] shortcode makes this a cinch.
Below is an example.

This is some breakout content

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It’s also called placeholder (or filler) text. It’s a convenient tool for mock-ups.

The [ssc]

[/ssc] shortcode has a few parameters that allow you to style it to your likings. The example above uses the defaults, however you can implicitly set the background, color, and padding CSS attributes as well as a custom classname to inherit.

[ssc]
// Your content here. You can even display images and other shortcodes within this area.
[/ssc]

Parameters:

parameter description default
bg background color #EEEEEE
color text color #000000
padding css vertical padding 40px
img fullscreen background image (URL) null
video fullscreen background video (YouTube ID) null
class CSS class (for advanced styling) null