@moodxd/component-container v1.0.3

MoO Container

The Container sets the maximum width for content. There are two types of containers:

Standard

Use Container (max-width of 1600px and margin-left and margin-right of auto) to center the element on the page

<div class="Container u-bgYellowLighter">
  <p class="u-pV5">Container</p>
</div>

Fluid

Use Container--fluid to change the max-width to 100 percent (Note: the margin-left and margin-right of auto becomes obsolete)

<div class="Container Container--fluid  u-bgYellowLighter">
  <p class="u-pV5">Fluid Container</p>
</div>

Note: A Container class must be used on a parent element in order to apply to a child.

Best Practice: Container and Container--fluid classes can be used together without layout issues, but it’s best to use just the Container--fluid class.