Container
Starting element for page layout
Demo
maxwidth
.See more examples
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-container |
Custom tag | Any |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
maxwidth |
|
Sets the max width of the container, which includes some padding. "lg" grows up to 1536px, "md" starts at 800px and
shrinks down, and "sm" starts at 576px and shrinks down. Read more on maxwidth for details. |
Guidelines
More on maxwidth
By default Container will grow up to 1536 pixels wide (maxwidth="lg"
), which is intended to make full use of the screen up to the equivalent of a 16" MacBook Pro. You can remove this limit with maxwidth="none"
.
In cases where there isn't a full page of content or maybe a more focused layout is desired, "md" is often the right width. On-boarding flows or a promotional page are good examples where "md" would be useful. In some cases a very narrow and focused layout is needed, like a log in form. Use "sm" for these.
In all cases Container will include padding and center itself in the viewport.
Other layout elements
HTML offers a number of semantic elements to use for layout in addition to M-'s Container and Grid. From W3C:
<header>
Defines a header for a document or a section<nav>
Defines a container for navigation links<section>
Defines a section in a document<article>
Defines an independent self-contained article<aside>
Defines content aside from the content (like a sidebar)<footer>
Defines a footer for a document or a section
Accessibility
There are no accessibility recommendations for Container.