Components

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

Tag

An extension of GOVUK tag with additional colour options.

Open this example in a new tab

HTML

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th class="govuk-table__header" scope="col">Class name</th>
      <th class="govuk-table__header" scope="col">Tag</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag">
          Default
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-green</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-green">
          Green
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-red</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-red">
          Red
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-purple</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-purple">
          Purple
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-brown</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-brown">
          Brown
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-yellow</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-yellow">
          Yellow
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code>das-tag das-tag--solid-orange</code>
      </td>
      <td class="govuk-table__cell">
        <strong class="das-tag das-tag--solid-orange">
          Orange
        </strong>
      </td>
    </tr>

  </tbody>
</table>