Styles

Text

A selection of styles for text.

Text colours

Open this text 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"> Colour </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-green </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-green">
          Green
        </span>
      </td>
    </tr>
	<tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-red </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-red">
          Red
        </span>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-blue </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-blue">
          Blue
        </span>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-dark-blue </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-dark-blue">
          Dark blue
        </span>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-dark-grey </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-dark-grey">
          Dark grey
        </span>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-mid-grey </code>
      </td>
      <td class="govuk-table__cell">
        <span class="das-!-color-mid-grey">
          Mid grey
        </span>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <td class="govuk-table__cell">
        <code> das-!-color-inherit </code>
      </td>
      <td class="govuk-table__cell">
        Forces element to inherit text color from its parent element
      </td>
    </tr>
  </tbody>
</table>

Text align

You can override how text aligns on the page.

Class name Description
das-!-text-align-left to align text to the left
das-!-text-align-right to align text to the right
das-!-text-align-left--from-tablet to align text to the left from tablet sized screens and upwards
das-!-text-align-right--from-tablet to align text to the right from tablet sized screens and upwards

Text icon

Open this text example in a new tab
HTML 
<h3 class="govuk-heading-s">Success icon</h3>
<p class="das-!-color-green das-text--success-icon">4 providers available for this apprenticeship location</p>
<h3 class="govuk-heading-s">Error icon</h3>
<p class="das-!-color-red das-text--error-icon">This training provider does not offer this course at the apprenticeship location</p>