Red Hat SummitLayout 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.
Lorem ipsum dolor
Nunc ac ex id felis laoreet
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
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.