Z - Demo Layouts

- Containers Using Classes -
see WST CONTAINERS in section-column-styles.css
+ bg-color, padding, other helper classes

Left Image SmallRight Text Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ratione.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipiscing velit ut labore dolore sit magnam.

Left Text LargeRight Image Small

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, et tempus feugiat. Nullam varius turpis dui, eu faucibus eros iaculis quis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Left Image LargeRight Text Small

Left Text SmallRight Image Large

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.

Left Text SmallRight Boxes Large

ADDITIONAL HELPER CLASSES:

Background

.bg-color — accent color background
.bg-primary — primary color background
.bg-secondary — secondary color background
.banner-section — full-width banner/hero-style section (constrains .content-wrapper width)

Padding Y (top + bottom)

.padding-y-xs — 2rem top/bottom
.padding-y-sm — 4rem top/bottom (3rem at ≤1024px)
.padding-y-md — 6rem top/bottom (5rem at ≤1024px, 4rem on mobile)
.padding-y-lg — 8rem top/bottom (7rem at ≤1024px, 6rem on mobile)
.padding-y-xl — 10rem top/bottom (9rem at ≤1024px, 8rem on mobile)

Padding Top

.padding-top-xs — 2rem top
.padding-top-sm — 4rem top (3rem at ≤1024px)
.padding-top-md — 6rem top (5rem at ≤1024px, 4rem mobile)
.padding-top-lg — 8rem top (7rem at ≤1024px, 6rem mobile)
.padding-top-xl — 10rem top (9rem at ≤1024px, 8rem mobile)

Padding Bottom

.padding-bottom-xs — 2rem bottom
.padding-bottom-sm — 4rem bottom (3rem at ≤1024px)
.padding-bottom-md — 6rem bottom (5rem at ≤1024px, 4rem mobile)
.padding-bottom-lg — 8rem bottom (7rem at ≤1024px, 6rem mobile)
.padding-bottom-xl — 10rem bottom (9rem at ≤1024px, 8rem mobile)

Padding X (left + right)

.padding-x-xs — 2rem left/right
.padding-x-sm — 4rem left/right (3rem at ≤1024px)
.padding-x-md — 6rem left/right
.padding-x-lg — 8rem left/right
.padding-x-xl — 10rem left/right

Margin Y (top + bottom)

.margin-y-xs — 2rem top/bottom
.margin-y-sm — 4rem top/bottom
.margin-y-md — 6rem top/bottom
.margin-y-lg — 8rem top/bottom
.margin-y-xl — 10rem top/bottom

Margin Top

.margin-top-xs — 2rem top
.margin-top-sm — 4rem top
.margin-top-md — 6rem top
.margin-top-lg — 8rem top
.margin-top-xl — 10rem top

Margin Bottom

.margin-bottom-xs — 2rem bottom
.margin-bottom-sm — 4rem bottom
.margin-bottom-md — 6rem bottom
.margin-bottom-lg — 8rem bottom
.margin-bottom-xl — 10rem bottom

Gap

.gap-xs — 2rem gap on inner container
.gap-sm — 4rem gap (3rem at ≤1024px)
.gap-md — 6rem gap (5rem at ≤1024px, 4rem mobile)
.gap-lg — 8rem gap
.gap-xl — 10rem gap

Zero Overrides

.no-padding-top — removes top padding
.no-padding-bottom — removes bottom padding
.no-padding-left — removes left padding
.no-padding-right — removes right padding
.no-margin-top — removes top margin
.no-margin-bottom — removes bottom margin

Box Tall Image H3 Title

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.