Dashboard

When to use this component

Use the dashboard component to display summary totals or counts in a visually prominent way, particularly when you need to:

show key metrics at a glance
indicate status alongside a count (such as "action required" or "complete")
provide quick navigation to filtered views of data

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 dashboard component consists of tiles that display a number and label, optionally with a status indicator below. Each tile can be a link to navigate users to a filtered view of the data.

The component uses fluid typography with clamp() to ensure numbers scale appropriately across different screen sizes.

HTML examples

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

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

Dashboard with status (mixed states)

Shows a three-column dashboard with both passing and failing status indicators.

12 pending requests Action required

48 current members Active

156 requests processed All time

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">12</span>
          <span class="dfe-dashboard-label">pending requests</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing">
        Action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">48</span>
          <span class="dfe-dashboard-label">current members</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">156</span>
          <span class="dfe-dashboard-label">requests processed</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        All time
      </span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">12</span>
          <span class="dfe-dashboard-label">pending requests</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing">
        Action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">48</span>
          <span class="dfe-dashboard-label">current members</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">156</span>
          <span class="dfe-dashboard-label">requests processed</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        All time
      </span>
    </span>
  </div>
</div>


{% endblock %}

Dashboard with status (all passing)

Shows a three-column dashboard where all items have a passing (green) status.

Dashboard with status (all passing)

Example
HTML
Web Template

0 pending requests No action required

24 active users Active

89 completed tasks Complete

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">0</span>
          <span class="dfe-dashboard-label">pending requests</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        No action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">24</span>
          <span class="dfe-dashboard-label">active users</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">89</span>
          <span class="dfe-dashboard-label">completed tasks</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Complete
      </span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">0</span>
          <span class="dfe-dashboard-label">pending requests</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        No action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">24</span>
          <span class="dfe-dashboard-label">active users</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">89</span>
          <span class="dfe-dashboard-label">completed tasks</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Complete
      </span>
    </span>
  </div>
</div>


{% endblock %}

Two column layout

A two-column dashboard layout using govuk-grid-column-one-half.

Two column layout

Example
HTML
Web Template

5 incomplete applications Action required

42 complete applications Complete

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">5</span>
          <span class="dfe-dashboard-label">incomplete applications</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing">
        Action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-half">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">complete applications</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Complete
      </span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">5</span>
          <span class="dfe-dashboard-label">incomplete applications</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing">
        Action required
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-half">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">complete applications</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Complete
      </span>
    </span>
  </div>
</div>


{% endblock %}

Dark variant (without status)

A standalone dark dashboard tile without a status bar, useful for simple count displays.

Dark variant (without status)

Example
HTML
Web Template

156 total applications

89 approved

67 pending review

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">156</span>
      <span class="dfe-dashboard-label">total applications</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">89</span>
      <span class="dfe-dashboard-label">approved</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">67</span>
      <span class="dfe-dashboard-label">pending review</span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">156</span>
      <span class="dfe-dashboard-label">total applications</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">89</span>
      <span class="dfe-dashboard-label">approved</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-dark">
      <span class="dfe-dashboard-number">67</span>
      <span class="dfe-dashboard-label">pending review</span>
    </span>
  </div>
</div>


{% endblock %}

Light variant (without status)

A standalone light dashboard tile with a border, without a status bar. Use when you need a lighter appearance that fits better on coloured backgrounds.

Light variant (without status)

Example
HTML
Web Template

156 total applications

89 approved

67 pending review

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">156</span>
      <span class="dfe-dashboard-label">total applications</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">89</span>
      <span class="dfe-dashboard-label">approved</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">67</span>
      <span class="dfe-dashboard-label">pending review</span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">156</span>
      <span class="dfe-dashboard-label">total applications</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">89</span>
      <span class="dfe-dashboard-label">approved</span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-light">
      <span class="dfe-dashboard-number">67</span>
      <span class="dfe-dashboard-label">pending review</span>
    </span>
  </div>
</div>


{% endblock %}

Size variants

Shows the three available sizes: default, smaller, and smallest.

Size variants

Example
HTML
Web Template

42 default size Active

42 smaller size Active

42 smallest size Active

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">default size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">smaller size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smallest">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">smallest size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">default size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">smaller size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smallest">
          <span class="dfe-dashboard-number">42</span>
          <span class="dfe-dashboard-label">smallest size</span>
        </span>
      </a>
      <span class="dfe-dashboard-status">
        Active
      </span>
    </span>
  </div>
</div>


{% endblock %}

Status bar with link

The status bar can contain a link for additional navigation options.

Status bar with link

Example
HTML
Web Template

8 pending reviews View all pending

24 approved items View approved

3 rejected items Review rejected

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">8</span>
          <span class="dfe-dashboard-label">pending reviews</span>
        </span>
      </a>
      <span class="dfe-dashboard-status dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">View all pending</a>
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">24</span>
          <span class="dfe-dashboard-label">approved items</span>
        </span>
      </a>
      <span class="dfe-dashboard-status dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">View approved</a>
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">3</span>
          <span class="dfe-dashboard-label">rejected items</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">Review rejected</a>
      </span>
    </span>
  </div>
</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 commonplace on a CRM Portal.

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

{% block main %}

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

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">8</span>
          <span class="dfe-dashboard-label">pending reviews</span>
        </span>
      </a>
      <span class="dfe-dashboard-status dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">View all pending</a>
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">24</span>
          <span class="dfe-dashboard-label">approved items</span>
        </span>
      </a>
      <span class="dfe-dashboard-status dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">View approved</a>
      </span>
    </span>
  </div>
  <div class="govuk-grid-column-one-third">
    <span class="dfe-dashboard-with-status">
      <a class="govuk-link govuk-link--inverse dfe-dashboard-link" href="#">
        <span class="dfe-dashboard-smaller">
          <span class="dfe-dashboard-number">3</span>
          <span class="dfe-dashboard-label">rejected items</span>
        </span>
      </a>
      <span class="dfe-dashboard-status-failing dfe-dashboard-status--with-link">
        <a class="govuk-link govuk-link--inverse" href="#">Review rejected</a>
      </span>
    </span>
  </div>
</div>


{% endblock %}

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