Scorecard

The scorecard component is used to visualise a metric value in digestable format, showing the overall value, description and trends

Open this example (Scorecard (example)) in a new window

Contents 

    <div class="dpr-scorecard" data-dpr-module="scorecard">
      <p class="govuk-heading-s govuk-!-margin-bottom-1">
        Prison operational capacity
      </p>
    
      <p class="govuk-body dpr-scorecard__value govuk-tag--">88,818</p>
    
      <p class="govuk-body dpr-scorecard__value-description">Status: </p>
    
      <p class="govuk-body-s govuk-!-margin-bottom-2">
        â—¼ 1,959 from Jun 23
      </p>
    
      <div class="govuk-!-margin-bottom-3">
        <a class="govuk-link govuk-link--no-visited-state " href="#">View breakdown<span class="govuk-visually-hidden"> for Prison operational capacity</span></a>
      </div>
    
      <p class="dpr-scorecard__value-from govuk-body-s">Value for Jun 24</p>
    
    </div>

Nunjucks macro options

Name Type Required Description
title string Yes The scorecard title
value string Yes The scorecard value
trend object no The trend data See Chart
link object no The visualisation link. See Chart
valueFor string no The date the value was for
rag red, green, yellow no The date the value was for

Trend

Name Type Required Description
direction Up, Down, No change Yes The trend direction
value string Yes The trend value
from string Yes The trend comparison date
Name Type Required Description
href string Yes The link address
displayName string Yes The link display name 

    {% from "dpr/components/_dashboards/scorecard/view.njk" import dprScoreCard %}
    
    {{ dprScoreCard({
      title: 'Prison operational capacity',
      value: '88,818',
      trend: {
        direction: 'Up',
        value: '1,959',
        from: 'Jun 23'
      },
      link: {
        href: '#',
        displayName: 'View breakdown'
      },
      valueFor: 'Jun 24',
      rag: 'red'
    }) }}

When to use

Use this component when you want to display a specific value in an impactful way