container

Provides base margins and responsive layout logic for pages

import { CdrContainer } from '@rei/cedar'

The Cedar container component is the foundational layout mechanism on your page. It centers content and provides the page with a left and right gutter. This helps separate the content and the edge of the browser window.

CdrContainer is a simple wrapper providing a basic responsive layout logic. The padding and margin applied by CdrContainer is designed to align with the header and footer in the REI page template.

This component provides the same functionality as the cdr-container or cdr-container-fluid mixins from @rei/cdr-tokens. It’s wrapped in a Vue component to make it easier to use.

See the responsive guidelines article for more information on display breakpoints, media queries and mixins.

Usage

When to use

Wrapping your page content and providing proper padding and margins around it

When not to use

Nesting instances of CdrContainer within one another
Wrapping content intended to take up the full screen width within a CdrContainer (like a hero image)

Best practices

Container variants

The container builds in its display settings for each of the breakpoints. This allows all pages to begin from the same layout context as each other. The container has two variants: standard container and fluid container.

Breakpoints for R E I’s responsive layout.

Flexible width

The default static CdrContainer allows flexible content width, up to a max width of 1232px. This corresponds to our large breakpoint. The fluid variant of the container has no max width. Pages can contain both fluid and standard containers.

Standard vs. fluid container examples demonstrating how fluid containers have no max width

For content using the full screen width within a CdrContainer, use multiple instances of CdrContainer adjacent to that full width content:

<cdr-container>
  page content
</cdr-container>
<div class="full-width-content">
  full screen width content
</div>
<cdr-container>
  more page content
</cdr-container>

CdrContainer

Props

Name	Type	Default
tag Sets the HTML tag for the container element	string	'div'
modifier Controls whether container is static or fluid width. Possible values: static, fluid	string	'static'

Slots

Name
default CdrContainer content