Container

Provides base margins and responsive layout logic for pages

# Overview

CdrContainer is a simple wrapper that provides 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 but wrapped in a Vue component for ease of use. Note that the example below needs to be opened in CodeSandbox to see the full static vs. fluid behavior.

# Accessibility

Usage of the tag prop should semantically match the layout of your page. In general, the default tag value div will work for the majority of use cases.

# Guidelines

The default static CdrContainer has a flexible content width up to a max width of 1232px which corresponds to our large breakpoint, while the fluid CdrContainer has no max-width. See the responsive foundations article for more information on container usage.

# Use when

  • Use CdrContainer to wrap your page content and provide proper padding and margins around it.

# Don’t use when

  • Do not nest instances of CdrContainer within one another.
  • Do not wrap content that is intended to take up the full screen width within a CdrContainer, for example a hero image. Instead 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>
1
2
3
4
5
6
7
8
9

# API

# Props

tag

name

string

type

'div'

default

modifier

name

string

type

'static'

default

Controls whether container is static or fluid width. Possible values: { 'static' | 'fluid' }

# Slots

Find more information about using Slots in the article Getting Started as a Developer.

default

name

Slot for CdrContainer content.