Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Graph

A simple bar graph usually used to display feedback results.

Open this example in a new tab

HTML

<div class="das-graph">
  <ul class="das-graph__list">
    <li class="das-graph__list-item">
      <h3 class="das-graph__label">
        Excellent
      </h3>
      <span class="das-graph__chart">
        <span class="das-graph__bar">
          <span class="das-graph__bar-value" style="width: 30%"></span>
        </span>
      </span>
      <p class="das-graph__figure">
        8 <span class="govuk-visually-hidden">out of 27 </span> reviews <span class="govuk-visually-hidden"> were given
          an excellent rating</span>
      </p>
    </li>
    <li class="das-graph__list-item">
      <h3 class="das-graph__label">
        Good
      </h3>
      <span class="das-graph__chart">
        <span class="das-graph__bar">
          <span class="das-graph__bar-value" style="width: 48%"></span>
        </span>
      </span>
      <p class="das-graph__figure">
        13 <span class="govuk-visually-hidden">out of 27 </span> reviews <span class="govuk-visually-hidden"> were given
          an good rating</span>
      </p>
    </li>
    <li class="das-graph__list-item">
      <h3 class="das-graph__label">
        Poor
      </h3>
      <span class="das-graph__chart">
        <span class="das-graph__bar">
          <span class="das-graph__bar-value das-graph__bar-value--poor" style="width: 15%"></span>
        </span>
      </span>
      <p class="das-graph__figure">
        4 <span class="govuk-visually-hidden">out of 27 </span> reviews <span class="govuk-visually-hidden"> were given
          an poor rating</span>
      </p>
    </li>
    <li class="das-graph__list-item">
      <h3 class="das-graph__label">
        Very
        poor</h3>
      <span class="das-graph__chart">
        <span class="das-graph__bar">
          <span class="das-graph__bar-value das-graph__bar-value--poor" style="width: 7%"></span>
        </span>
      </span>
      <p class="das-graph__figure">
        2 <span class="govuk-visually-hidden">out of 27 </span> reviews <span class="govuk-visually-hidden"> were given
          an very poor rating</span>
      </p>
    </li>
  </ul>
</div>