This is meant to be reusable for any area that:

• should be centered
• on wide viewports, should fill the width of the screen up to a max width of the mobile breakpoint
• on narrow viewports, should have standard side padding

If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.

Center content with a max width of the mobile breakpoint.

This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.

Use this style on Quiz Engine pages.

This is identical to content, except that it uses the quizEngineMobile breakpoint instead of the mobile breakpoint.

If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.

Use this style on Quiz Engine pages.

This is identical to centeredContent, except that it uses the quizEngineMobile breakpoint instead of the mobile breakpoint.

This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.

Advanced use only: center content up to a custom page width, with side padding when narrower.

Advanced use only: center content up to a custom page width.

Convenience for adding the appriopriate amount of whitespace at the end of the page with margin.

Every page should have 30px of whitespace separating the header nav and the page content, as well as before any secondary headers.

See the UI Style Guide and Caveats' Spacing section for more details.

Convenience for adding the appriopriate amount of whitespace on the sides of a full-width container on the page or on the page with side padding.

Unless content is flush with the edges of the viewport, there should be 15px of left/right spacing between the content and the viewport edge.

See the UI Style Guide and Caveats' Spacing section for more details.

Convenience for adding the appriopriate amount of whitespace at the end of the page with margin.

Every page should have 50px of whitespace at the end, so that footers don't end up spanning the middle of the page, and for consistency's sake.

See the UI Style Guide and Caveats' Spacing section for more details.

Most elements should have 20px of whitespace separating them vertically.

See the UI Style Guide and Caveats' Spacing section for more details.

Most elements should have 10px of whitespace separating them horizontally.

See the UI Style Guide and Caveats' Spacing section for more details.