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.
<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
|
| string | - | 'id' attribute to place on the base HTML element |
| string | - | Block name override in BEM style classes applied to all elements |
| Modifiers | - | BEM style modifiers to apply to the base HTML element |
| string | - | Extra classes to apply to the base HTML element |
| 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.
<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.
<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.
<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>