Basic Layouts & Boxes (H2)
Stacked Content (H3)
This Stack is aligned to the left (H4)
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales.
Spacing between stacked text elements is variable, based on Font Size (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
Content-width is limited by the Measure (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Centered Content (H3)
This content is aligned to the center (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Centered content is stacked by default (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
Boxed Content (H3)
This content is wrapped inside a flexible box (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit.
Boxed content is stacked by default (H4)
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales.
This content is centered inside a box (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar.
Nullam sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit.
Visual Content (H3)
The Image below is part of the centered stack (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
This content is wrapped inside an image frame (H4)
Image frames are similar to the flexible box, except they...
- feature a background image
- dont always contain content
- have a minimal height
Split Content (H3)
This Aside-layout splits content vertically (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
The larger column is known as the 'Not Aside' and contains the main content (H5)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar.
Main content inside an aside-layout is stacked by default (H5)
Curabitur est purus, dapibus non sodales a, blandit vitae enim. Nam bibendum sagittis urna eget dictum. Cras efficitur ante sapien.
Aside content inside an aside-layout is arranged inline by default, but appears stacked on desktop (H5)
Nullam sit amet. Nullam gravida urna quis nunc porta pulvinar. Aliquam consequat convallis orci, eu pharetra ex auctor.
This type of aside-layout can also be nested (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
The Aside may contain visual content (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Visual content can be applied to a sidebar in various ways. The sidebar may...
- contain an <img>
- contain an Image Frame
- be an Image Frame
This Twin Aside-layout features sidebars on either side (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Columns inside an aside-layout are padded vertically (H4)
Curabitur est purus, dapibus non sodales a, blandit vitae enim. Nam bibendum sagittis urna eget dictum. Cras efficitur ante sapien.
Everything Boxed (H3)
Boxes are flush with Section boundries (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Curabitur est purus, dapibus non sodales a, blandit vitae enim. Nam bibendum sagittis urna eget dictum. Cras efficitur ante sapien.
Full-Width Boxed Section (H3)
A full-width box wrapper facilitates a full-width background (H4)
Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Wrapped sections gain increased padding by default (H4)
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar.
Additional Box Types (H2)
The Brick (H3)
Unlike a flexible box, the Brick has a fixed aspect ratio (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Bricks fill available width by default, same as images (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Brick 3:2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Brick 16:9
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Brick 2:1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
The Tile (H3)
Tiles are squares with maximum dimensions (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Tile
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Tile M
Lorem ipsum dolor sit amet.
Tile S
Lorem ipsum dolor sit amet.
Box Constructs (H2)
The Showcase (H3)
A Showcase wraps around any other box type (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Besides its body, a Showcase contains a header and/or footer (H4)
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales.
It adopts Tile-width, but grows if wrapped around other box types (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales.
Brick 3:2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
The Post Card - default (H3)
A Post Card is a Box type suitable for (Custom) Post-repeaters (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
The default Post Card features a Has Aside layout (H4)
Praesent gravida tincidunt nibh eu accumsan. Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar.
The Post Card - layered (H3)
The Layered setup, Aside and Not Aside overlap (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
The Post Card Info appears Boxed (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
Post Card Info, No Image (H3)
A stripped Post Card Info may serve as a Post Card without image (H4)
Cras ornare lorem vehicula maximus sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed cursus pharetra pulvinar. Nullam sit amet.
Advanced Layouts (H2)
Single-line Flip (H3)
Boxes are distributed along a single line, horizontally or vertically (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
A breakpoint-setting determines at what parent-width the direction flips (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Box Flex (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Box Flex (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Box Flex + Img Frame (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Box Flex (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Single-line Flip: Just Two (H3)
A lower breakpoint is set for a small number of children (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Box Flex (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Img Frame (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim.
Multi-column Stack (H3)
Boxes are distributed horizontally inside a responsive grid (H4)
Suited for boxes with a flexible dimensions (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Multi-line Wrap (H3)
Boxes are distributed horizontally across multiple lines (H4)
Suited for boxes with a fixed width, such as words, icons and tiles (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
Section Setups (H2)
Single-line Flip (H3)
Boxes are distributed along a single line, horizontally or vertically (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.
A breakpoint-setting determines at what parent-width the direction flips (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa enim. Etiam in cursus justo, in condimentum velit. Praesent gravida tincidunt nibh eu accumsan.