Components

Width container

Pseudo-component

A simple container to limit the width of its contents.

This is used by the page components to control the width of the page contents. Users will not typically need to use this.

Contents

<div
  class="govuk-width-container"
  style="max-width:300px"
>
  <div class="govuk-panel govuk-panel--confirmation">
    <h1 class="govuk-panel__title">Contents</h1>
    <div class="govuk-panel__body"></div>
  </div>
</div>
<WidthContainer maxWidth={300}>
  <Panel
    classModifiers="confirmation"
    title="Contents"
  />
</WidthContainer>
Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element
classBlock string - Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element
maxWidth number - Maximum width of the container in px units (-1 for full width)

Stories

Standard

A standard Width container with the width inherited from govuk-frontend.

Contents

<div class="govuk-width-container">
  <div class="govuk-panel govuk-panel--confirmation">
    <h1 class="govuk-panel__title">Contents</h1>
    <div class="govuk-panel__body"></div>
  </div>
</div>
<WidthContainer>
  <Panel
    classModifiers="confirmation"
    title="Contents"
  />
</WidthContainer>

Custom width

A Width container with a custom width set in pixels.

Contents

<div
  class="govuk-width-container"
  style="max-width:300px"
>
  <div class="govuk-panel govuk-panel--confirmation">
    <h1 class="govuk-panel__title">Contents</h1>
    <div class="govuk-panel__body"></div>
  </div>
</div>
<WidthContainer maxWidth={300}>
  <Panel
    classModifiers="confirmation"
    title="Contents"
  />
</WidthContainer>

Full width

A Width container which does not limit the width of its contents. This is useful for some internal systems such as dashboards.

Contents

<div
  class="govuk-width-container"
  style="max-width:none"
>
  <div class="govuk-panel govuk-panel--confirmation">
    <h1 class="govuk-panel__title">Contents</h1>
    <div class="govuk-panel__body"></div>
  </div>
</div>
<WidthContainer maxWidth={-1}>
  <Panel
    classModifiers="confirmation"
    title="Contents"
  />
</WidthContainer>