Layout demo page

Demo of available layouts

Our layouts are set by a 12 column grid meaning they add up to 12.

Check out the flexible template system space on The Source for more info around patterns!

Body layout selected "6"

Body layout selected "6", center alignment

Body layout selected "8"

Body layout selected "8", center alignment

Body layout selected "5 6"

Body layout selected "6 5"

Body layout selected "6 6"

Body layout selected "4 7"

Body layout selected "7 4"

Body layout selected "7 5"

Body layout selected "8 4"

Body layout selected "4 8"

Body layout selected "9 3"

Body layout selected "3 9"

Body layout selected "4 4 4"

Body layout selected "3 3 3 3"

Body layout selected "gallery2"

Body layout selected "gallery3"

Body layout selected "gallery4"

Body layout selected "gallery5"

Body layout selected "gallery 5" with centered content

Body layout selected "gallery-auto-large" with only 2 items

This layout is essentially magic :) It will look at how many subpatterns are added and update each width to either 50% if there's 2 or 33% if there's 3+ subpatterns..

Body layout selected "gallery-auto-large"

Body layout selected "stacked"

Custom band with aside

Body layout selected "6" and right full aside

Custom band with aside

Body layout selected "6" with right body aside

Custom band with aside

Body layout selected "8" and left full aside

Custom band with aside

Body layout selected "8" and left body aside

Custom band with aside

Body layout selected "stacked" and calls in right full aside

Custom band with aside

Body layout selected "6 6" with right full aside

Custom band with aside

Body layout "6 6" aside position "right body"

Custom band with aside

Body layout selected "8 4" with right full aside

Note that once an aside is added to the layout the body no longer respects the "8 4" layout and calling in "8 4" has the same design as calling in "6 6".

Custom band with aside

Body layout selected "4 4 4" with right full body aside

Custom band with aside

Body layout selected "3 3 3 3" with right full aside

Note that once an aside is added to the layout the body no longer respects the "3 3 3 3" layout. There's 4 images being added to the body but only 3 show and therefore this layout combined with the aside doesn't work.

Custom band with aside

Body layout selected "gallery-auto-large" with right full aside

Note that once an aside is added to the layout the body no longer respects the "gallery-auto-large" and therefore this layout combined with the aside doesn't work.

Custom band with aside

Body layout selected "5 6" with aside position "right full"

Custom band with aside

Body layout selected "5 6" with aside position "right body"

Custom band with aside

Body layout selected "6 5" with aside position "right full"

Custom band with aside

Body layout "6 5" aside position "right body"

Custom band with aside

Body layout selected "4 7" with aside position "right full"

Custom band with aside

Body layout "4 7" aside position "right body"

Custom band with aside

Body layout "9 3" with right full aside

Custom band with aside

Body layout "3 9" with right full aside

Standard text band - 7 5 left

Standard text band - 7 5 center

Standard text band - 7 5 right

Standard text band - 8 4 left

Standard text band - 8 4 center

Standard text band - 8 4 right

Standard text band - 9 3 left

Standard text band - 9 3 center

Standard text band - 9 3 right

Custom band - Masonry layout selected

This layout is meant to be used with text. The subpatterns will flow by columns and the order in which they are added matters.

Proin vel fringilla lectus. Integer tempor, enim nec auctor hendrerit, ipsum leo auctor arcu, et posuere metus sem eu quam. Donec sed suscipit dolor. Donec mauris quam, ornare sed ornare at, hendrerit nec tortor. Sed quis efficitur urna. Phasellus nibh nunc, pretium sed auctor sit amet, sodales sed magna.

Aenean placerat fermentum metus id accumsan. Sed sed pulvinar arcu, a egestas ligula. Proin mauris turpis, iaculis nec mauris vitae, vehicula imperdiet elit. Praesent congue, erat nec vulputate vestibulum, leo ante semper risus, nec suscipit ipsum purus vel eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Aenean sit amet tortor ut dui tempus aliquam et eget orci. Vestibulum dignissim vulputate ante eu ornare. Aenean tincidunt metus at mauris placerat, non sagittis est hendrerit.

Headline 4