Containers

Containers define the readable width and horizontal rhythm of each page section. Use wf-container for default content, wf-container-wide for larger layouts, and wf-container-fluid for full-width interfaces.

Live Examples

Default Content Width

Best for docs and readable text-heavy content.

.wf-container inside available viewport.

<div class="wf-container">
  ...
</div>

Wide Content Width

Great for preview galleries, component matrices, and split docs.

.wf-container-wide or extra breathing room.

<div class="wf-container-wide">
  ...
</div>

Fluid Container

Use when the design needs full-width rows with safe side gutters.

Panel A

Panel B

Panel C

<div class="wf-container-fluid">
  <div class="wf-grid wf-grid-3">...</div>
</div>

Class Reference

All modifier classes available on .wf-container

Class Name	Type	Description
wf-container	Layout	Centered content container with framework max content width.
wf-container-wide	Layout	Wider-centered container for denser dashboards and docs grids.
wf-container-fluid	Layout	Fluid container that keeps horizontal gutters while using full width.
wf-section / wf-section-tight	Spacing	Vertical rhythm helpers are typically combined with any container size.