Page layouts

There are a few options for laying out pages. While the below options are not complete solutions, the basic structure of a page can be discerned from one of the following.

Narrow layout

Narrow layouts use a single .miz-container. This container will stack content down the center of the page.

.miz-container
.miz-main

.miz-main__layer

.miz-main__layer

Wide container

Wider layouts use the .miz-container–wide container to offer a wider experience.

.miz-container–wide
.miz-main

.miz-main__layer

Double container

You can use the two together to have a double-contained layout.

.miz-container–wide
.miz-container
.miz-main

.miz-main__layer

Full width

.miz-container–fill
.miz-main

.miz-main__layer