Layouts examples

1. Full width

Full width content

This is a paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dolores explicabo minus, architecto dolorum corrupti nulla omnis unde dolorem, similique aut saepe deleniti id laudantium earum eaque, consectetur commodi placeat.

Full width content, layout with sidebar on the right. (Default)

This is a paragraph inside a layout with sidebar, column main content. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum veniam ea, maxime repudiandae accusamus blanditiis accusantium delectus soluta porro perspiciatis debitis est consequatur cum voluptates sint, vero ratione, et impedit.

Full width content, layout with sidebar on the right of 33.3333333333% (two thirds)

Full width content, inside a u-layout-focus

This is a paragraph inside a u-layout-focus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dolores explicabo minus, architecto dolorum corrupti nulla omnis unde dolorem, similique aut saepe deleniti id laudantium earum eaque, consectetur commodi placeat.

Full width content, inside a u-layout-focus with u-layout-focus--max-width

Full width content, layout grid (2 columns)

This is a paragraph inside a layout grid. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum veniam ea, maxime repudiandae accusamus blanditiis accusantium delectus soluta porro perspiciatis debitis est consequatur cum voluptates sint, vero ratione, et impedit.

This is a paragraph inside a layout grid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dicta fuga alias expedita accusamus labore temporibus quasi nesciunt deserunt officiis earum quod porro dolorum velit culpa, et harum? Minus, maiores?

Full width content, layout grid (3 columns)

2. Centered content. u-container utility class

Content inside u-container. Takes up all the space within the centered content.

This is a paragraph inside a u-container div. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quas natus dicta voluptas incidunt, tempore magni vero, enim optio repellat ratione eius perspiciatis exercitationem! Repellat ratione dicta enim obcaecati vel.

Content inside u-container, layout with sidebar on the right. (Default)

This is a paragraph inside a layout with sidebar, column main content, inside a u-container div. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque cum rem aliquid itaque dicta, consequatur quia vel. Voluptas odit delectus error ad iure fugiat molestias consectetur, excepturi illum quaerat unde?

Content inside u-container, layout with sidebar on the right of 33.3333333333% (two thirds)

Content inside u-container and inside a u-layout-focus

This is a paragraph inside a u-container div and inside a u-layout-focus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dolores explicabo minus, architecto dolorum corrupti nulla omnis unde dolorem, similique aut saepe deleniti id laudantium earum eaque, consectetur commodi placeat.

Content inside u-container, inside a u-layout-focus with u-layout-focus--max-width

Content inside u-container, layout grid (2 columns)

Content inside u-container, layout grid (3 columns - 3 columns) inside a l-stack for vertical space

Content inside u-container, l-cluster inside a l-stack for vertical space

l-cluster l-cluster--right

l-cluster l-cluster--center

l-cluster