Widget

A widget is a container for housing other components.

The Improving User Experience cluster want to make this component better.

If you work in Parliament and are using it or plan to use it, please contact us on the #design-system Slack channel.

When to use a widget

Use a widget when you want to wrap one or more components in a container with a <h2> heading.

You can use widgets on their own or combine to make whole pages. For example, the parliament.uk homepage.

<div class="widget">
  <div class="heading no-icon">
    <h2>Heading</h2>
  </div>
  <div class="content">
    <div class="highlight highlight-info">
      <p>Highlight used as an example component</p>
    </div>
  </div>
</div>

Other types of widget

Other types of widget are available in the code base. If you’re using any of these, please replace them with the widget above.

With icon
With no separator

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.