Default

The default container is the everyday page wrapper: it centres content and caps it at a maximum width (1140px at xl, 1440px at 2xl), with a responsive side margin either edge. A bare child sits in the centred content track; add .is-fullbleed to break a child out across the margins to the viewport edge.

<section class="tng-container">
  <!-- centred content, capped at the max width -->
</section>

Open in playground

Max width

The container centres its content and caps how wide it grows. Below xl the content fills the width inside a responsive margin; from xl it stops widening and centres.

Breakpoint	Behaviour
<xl	fills the width, responsive margin
xl	capped at 1140px, centred
2xl	capped at 1440px, centred

Fullbleed

By default every child stays within the centred content track. Add the is-fullbleed class to let a child span the full grid — across the margin tracks too — and reach the viewport edge.

<section class="tng-container">
  <div>Stays in the centred content track</div>
  <div class="is-fullbleed">Reaches the viewport edge</div>
</section>

Open in playground

Stays in the centred content track

Reaches the viewport edge