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 not to 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.

Variants

The dashboard component offers several variants:

With status: Includes a status bar below the main tile showing state (passing/failing)
Dark: A standalone dark tile without a status bar, with white text on black background
Light: A standalone light tile without a status bar, with black text on white background and a border
Status with link: The status bar itself can contain a link for additional navigation

Status indicators

When using the "with status" variant, you can indicate different states:

Passing (green): Use dfe-dashboard-status for positive states like "Active", "Complete", or "No action required"
Failing (red): Use dfe-dashboard-status-failing for states requiring attention like "Action required"

Size options

The dashboard number can be displayed in three sizes:

Default: Use dfe-dashboard for the largest display (32px base)
Smaller: Use dfe-dashboard-smaller for medium display (24px base)
Smallest: Use dfe-dashboard-smallest for compact display (18px base)

All sizes use fluid typography and will scale based on the 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. Refer to the layouts section for further guidance on structuring your web template.

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 title %}{% endblock %}

{% 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 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 title %}{% endblock %}

{% 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.

Dashboard two column

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 title %}{% endblock %}

{% 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.

Dashboard dark

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 title %}{% endblock %}

{% 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.

Dashboard light

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 title %}{% endblock %}

{% 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.

Dashboard sizes

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 title %}{% endblock %}

{% 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.

Dashboard status 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 title %}{% endblock %}

{% 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.