Two River Theater

Skip to main content Skip to search

Container styles

Container widths

Use the container widths setting to adjust how content is held on a page

Container style - Flush

Use the flush setting for CTA blocks and other full-bleed content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Inset

An inset container is full-width with a margin - use for creating grids of cards or multi-column layouts

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Max 1600

Content is restrained to a max-width of 1600px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Max 1200

Content is restrained to a max-width of 1200px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Max 1000 (default setting)

Content is restrained to a max-width of 1000px - setting text at this width keeps it to a readable max line-length on desktop

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Max 800

Content is restrained to a max-width of 800px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container style - Max 600

Content is restrained to a max-width of 600px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container alignment

Use the alignment settings to position blocks of content (all examples have Inset width)

Vertical align - top (default)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Vertical align - middle

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Vertical align - bottom

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Horizontal align - left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Horizontal align - center (default)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Horizontal align - right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.

Container backgrounds

Container with background colour

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container with background image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Container with background image & colour

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.