Contents

Open this example (Risk rating) in a new tab 

      
<style>
.dfe-tag--amber {
  color: #66420d;
  background: #ffe4bc;
}
</style>      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      <span class="govuk-caption-l">Test Primary School</span>
      Overall risk
    </h1>
  </div>
</div>
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <div class="govuk-form-group">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l govuk-!-font-size-27 govuk-!-margin-bottom-6">
          Risk rating
        </legend>
        <div class="govuk-radios govuk-!-margin-bottom-6" data-module="govuk-radios">
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall" name="newRiskRatingOverall" type="radio" value="Green">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall">
              <strong class="govuk-tag govuk-tag--green">Green</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-2" name="newRiskRatingOverall" type="radio" value="Amber Green">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-2">
              <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--green">Green</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-3" name="newRiskRatingOverall" type="radio" value="Amber Red">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-3">
              <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--red">Red</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-4" name="newRiskRatingOverall" type="radio" value="Red">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-4">
              <strong class="govuk-tag govuk-tag--red">Red</strong>
            </label>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="govuk-form-group">
      <label class="govuk-label govuk-label--l govuk-!-font-size-27 govuk-!-margin-bottom-6" for="newRiskRatingOverallSummary">
        Risk summary
      </label>
      <textarea class="govuk-textarea" id="newRiskRatingOverallSummary" name="newRiskRatingOverallSummary" rows="10"></textarea>
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

When to use this pattern

Use this pattern to show and update red, amber and green (RAG) risk ratings.

How it works

Use a summary card to present the risk rating and summary.

The summary card could include:

  • a 'Change' link, if users have permissions to update the risk rating and summary
  • the date the risk rating was provided
  • tags that show the risk rating. The CSS classes are mentioned below
  • a summary of the risk rating. Show the summary in paragraphs, if paragraphs were entered by a user

Risk rating summary card, without a Change link

Contents

Open this example (Summary card (read-only)) in a new tab 

      
<style>
  .dfe-tag--amber {
    color: #66420d;
    background: #ffe4bc;
  }
</style>
<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
    Overall risk
    </h2>
  </div>
  <div class="govuk-summary-card__content">
    <dl class="govuk-summary-list">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Risk rating
        </dt>
        <dd class="govuk-summary-list__value">
          <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--green">Green</strong>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Risk summary
        </dt>
        <dd class="govuk-summary-list__value">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis et ex ac egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </dd>
      </div>
    </dl>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Risk rating summary card, with a Change link

Contents

Open this example (Summary card (editable)) in a new tab 

      
<style>
  .dfe-tag--amber {
    color: #66420d;
    background: #ffe4bc;
  }
</style>
<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
    Overall risk
    </h2>
    <div class="govuk-summary-card__actions">
      <a class="govuk-link" href="#">Change<span class="govuk-visually-hidden"> Overall risk</span></a>
    </div>
  </div>
  <div class="govuk-summary-card__content">
    <dl class="govuk-summary-list">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Risk rating
        </dt>
        <dd class="govuk-summary-list__value">
          <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--green">Green</strong>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Risk summary
        </dt>
        <dd class="govuk-summary-list__value">
          A summary of why this risk rating was chosen, and what progress has been made in resolving it.
        </dd>
      </div>
    </dl>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Tag CSS classes

Use these CSS classes for the tags:

  • govuk-tag--green
  • dfe-tag--amber. This is a custom CSS class because there isn't an amber tag in the GOV.UK Design System: 
      <style>
  .dfe-tag--amber {
    color: #66420d;
    background: #ffe4bc;
  }
  </style>
  • govuk-tag--red

Update risk rating and summary

Clicking the 'Change' link in the summary card takes users to a separate page.

The page has a:

  • radios list for the risk rating. Each list item has one or more tags to indicate the rating
  • textarea for the risk summary. Make the height of the textarea proportional to the amount of text you expect users to enter
  • button to save the updated rating and summary

Contents

Open this example (Risk rating) in a new tab 

      
<style>
.dfe-tag--amber {
  color: #66420d;
  background: #ffe4bc;
}
</style>      
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <h1 class="govuk-heading-xl">
      <span class="govuk-caption-l">Test Primary School</span>
      Overall risk
    </h1>
  </div>
</div>
<div class="govuk-grid-row">
  <div class="govuk-grid-column-full">
    <div class="govuk-form-group">
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l govuk-!-font-size-27 govuk-!-margin-bottom-6">
          Risk rating
        </legend>
        <div class="govuk-radios govuk-!-margin-bottom-6" data-module="govuk-radios">
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall" name="newRiskRatingOverall" type="radio" value="Green">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall">
              <strong class="govuk-tag govuk-tag--green">Green</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-2" name="newRiskRatingOverall" type="radio" value="Amber Green">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-2">
              <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--green">Green</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-3" name="newRiskRatingOverall" type="radio" value="Amber Red">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-3">
              <strong class="govuk-tag dfe-tag--amber">Amber</strong>&nbsp;<strong class="govuk-tag govuk-tag--red">Red</strong>
            </label>
          </div>
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="newRiskRatingOverall-4" name="newRiskRatingOverall" type="radio" value="Red">
            <label class="govuk-label govuk-radios__label" for="newRiskRatingOverall-4">
              <strong class="govuk-tag govuk-tag--red">Red</strong>
            </label>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="govuk-form-group">
      <label class="govuk-label govuk-label--l govuk-!-font-size-27 govuk-!-margin-bottom-6" for="newRiskRatingOverallSummary">
        Risk summary
      </label>
      <textarea class="govuk-textarea" id="newRiskRatingOverallSummary" name="newRiskRatingOverallSummary" rows="10"></textarea>
    </div>
    <button type="submit" class="govuk-button" data-module="govuk-button">
      Continue
    </button>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

When users update the information and click the button, take them back to the summary card page.

Show a success banner to assure users that the rating and summary have been updated.

Contents

Open this example (Updating risk rating success banner) in a new tab 

      
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
  <div class="govuk-notification-banner__header">
    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
      Success
    </h2>
  </div>
  <div class="govuk-notification-banner__content">
    <h3 class="govuk-notification-banner__heading">
      The risk rating and summary have been updated
    </h3>
  </div>
</div>
We have not been able to create Nunjucks for this pattern. If you have any problems implementing this pattern, ask in the #rsd-ucd-community-public Slack channel.

Error messages

Make sure errors follow the error message guidance, with specific error messages for specific error states.

If a radio button has not been selected

Say 'Select a risk rating'.

If the textarea has not been filled in

Say 'Enter the risk summary'.

Research on this pattern

This pattern is being used in Manage free school projects to meet this need from our user needs database (opens a DfE Microsoft List):

User need 134: when managing a free school project, I need to record and update the project's risk rating and summary, so that stakeholders and I know if the school is likely to open on time.

Here's a design history post about the risk rating pattern.

Contribute to this page on GitHub