Clone: Container

Using Containers

This attribute allows you to select from one of three container types: small (for large volumes of text), medium (for narrow UI and forms), large (for contained UI), and full (for content that has no maximum width but requires a margin). These can be media query specific. This is accompanied by a selected alignment that will set the margins on the container to be left aligned, centered within the page, or right aligned.

Markup

<div data-c-container="MEDIA(TYPE, ALIGNMENT)"></div>

Available Arguments

# MEDIA

base
pp (Phone - Portrait)
pl (Phone - Landscape)
tp (Tablet - Portrait)
tl (Tablet - Landscape)
ds (Desktop - Small)
dm (Desktop - Medium)
dl (Desktop - Large)

# TYPE

small
medium
large
full

# ALIGNMENT

left
center
right

In Practice

<!--A container that is full width initially and then shrinks and aligns to the left on landscape tablet devices.-->
<div data-c-container="base(full, center) tl(small, left)"></div>

<!--A container that small and left aligned initially and then grows larger and centers itself on small desktop devices.-->
<div data-c-container="base(small, left) ds(large, center)"></div>

Changelog

Version 2.4.17

Added media query support for containers - old syntax will be supported until next minor version update (2.5).

Version 2.4.16

Added support for aligning containers left, centered, and right.

Version 2.4.5

Adds support for containers on menus (the data-c-container attribute can be used on data-c-menu elements and will style the nested ul accordingly).