Dashboard

When to use this component

Use the dashboard component to present a summarised view of information for groups. This is particularly beneficial for segregating statuses within a large dataset or displaying financial transaction totals.

When to not use this component

Avoid using the dashboard component if there's no need to present summary totals or a total count.

If dealing with a limited number of records, it's advisable to use the table component upfront, which can display a list of records alongside status tags for each entry.

How it works

The default dashboard consists of three columns, each accommodating an article for the dashboard content. However, you can customise the number of columns and articles according to your requirements.

You have the flexibility to include or exclude count or value sections within the dashboard as per your needs.

Customisation options

The dashboard component offers three interchangeable colour schemes to suit your preferences or requirements:

Default (black)
Red: Add the class dfe-dashboard-total-group__values--red to your dl element.
Blue: Add the class dfe-dashboard-total-group__values--blue to your dl element.

Width adjustment

If your dashboard comprises fewer than three columns and you want the component to match the page container width, adjust the govuk-grid-column-one-third class for the article elements.

For instance, if opting for two dashboard columns instead of three, substitute the govuk-grid-column-one-third class for both articles with govuk-grid-column-one-half to align with the page container width.

HTML Examples

Select the appropriate example below and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated earlier. Refer to the layouts section for further guidance on structuring your web template.

Three column example with count and amount

Successful payments

Count: 5
Amount: £1605.00

Successful refunds

Count: 0
Amount: £0.00

Net income

Amount: £0.00

      
      
<div class="dfe-dashboard">
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View not started applications">
          Successful payments
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values dfe-dashboard-total-group__values--blue">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">5</dd>
      <dt class="govuk-visually-hidden">Amount</dt>
      <dd class="dfe-dashboard-total-group__amount">£1605.00</dd>
    </dl>
  </article>
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View refunded transactions">
          Successful refunds
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values dfe-dashboard-total-group__values--red">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">0</dd>
      <dt class="govuk-visually-hidden">Amount</dt>
      <dd class="dfe-dashboard-total-group__amount">£0.00</dd>
    </dl>
  </article>
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View successful payments and refunded transactions">
          Net income
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values">
      <dt class="govuk-visually-hidden">Amount</dt>
      <dd class="dfe-dashboard-total-group__amount">£0.00</dd>
    </dl>
  </article>
</div>

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

Three column example with count only

Radio component

Example
HTML
Web Template

Not started

Count: 5

In progress

Count: 15

Completed

Count: 98

      
      
<div class="dfe-dashboard">
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View applications not started">
          Not started
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values dfe-dashboard-total-group__values--red">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">5</dd>
    </dl>
  </article>
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View applications in progress">
          In progress
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values dfe-dashboard-total-group__values--blue">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">15</dd>
    </dl>
  </article>
  <article class="dfe-dashboard-total-group govuk-grid-column-one-third">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View completed applications">
          Completed
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">98</dd>
    </dl>
  </article>
</div>

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

Two column example with count only

Radio component

Example
HTML
Web Template

Incomplete

Count: 20

Complete

Count: 64

      
      
<div class="dfe-dashboard">
  <article class="dfe-dashboard-total-group govuk-grid-column-one-half">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View incomplete">
          Incomplete
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values dfe-dashboard-total-group__values--blue">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">20</dd>
    </dl>
  </article>
  <article class="dfe-dashboard-total-group govuk-grid-column-one-half">
    <header class="dfe-dashboard-total-group__heading">
      <h2 class="dfe-dashboard-total-group__title">
        <a class="govuk-link" href="#" title="View complete">
          Complete
        </a>
      </h2>
    </header>
    <dl class="dfe-dashboard-total-group__values">
      <dt class="govuk-visually-hidden">Count</dt>
      <dd class="dfe-dashboard-total-group__count">64</dd>
    </dl>
  </article>
</div>

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.