Container
CdrContainer
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>
2
3
4
5
6
7
8
9
# API
View it on Github: https://github.com/rei/rei-cedar-vue-2/tree/next/src/components/container# 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 Installing Cedar.
default
name
Slot for CdrContainer content.