<commit_before>{{<layout_example}}

{{$pageTitle}}Example: Icons — Icons and images — GOV.UK elements{{/pageTitle}}

{{$content}}
<main id="content" role="main">

  {{>breadcrumb}}

  <style>
  .example-icon-list p { font-size: 16px; }
  .example-icon-list-background { background-color: #d3d3d3; padding: 15px; }
  </style>

  <div class="grid-row">
    <div class="column-two-thirds">

      <h1 class="heading-xlarge">
        <span class="heading-secondary">Icons and images</span>
        Example: Icons
      </h1>

      <p class="text">
        This test page shows the icons which are included in the govuk frontend toolkit.
      </p>

    </div>
  </div>

  <div class="grid-row">

    <div class="column-third">
      <h2 class="heading-medium">Step icons</h2>
      <ol class="example-icon-list">
        <li><i class="icon icon-step-1"></i> <p>icon-step-1.png</p></li>
        <li><i class="icon icon-step-2"></i> <p>icon-step-2.png</p></li>
        <li><i class="icon icon-step-3"></i> <p>icon-step-3.png</p></li>
        <li><i class="icon icon-step-4"></i> <p>icon-step-4.png</p></li>
        <li><i class="icon icon-step-5"></i> <p>icon-step-5.png</p></li>
        <li><i class="icon icon-step-6"></i> <p>icon-step-6.png</p></li>
        <li><i class="icon icon-step-7"></i> <p>icon-step-7.png</p></li>
        <li><i class="icon icon-step-8"></i> <p>icon-step-8.png</p></li>
        <li><i class="icon icon-step-9"></i> <p>icon-step-9.png</p></li>
        <li><i class="icon icon-step-10"></i> <p>icon-step-10.png</p></li>
        <li><i class="icon icon-step-11"></i> <p>icon-step-11.png</p></li>
        <li><i class="icon icon-step-12"></i> <p>icon-step-12.png</p></li>
        <li><i class="icon icon-step-13"></i> <p>icon-step-13.png</p></li>
        <li><i class="icon icon-step-14"></i> <p>icon-step-14.png</p></li>
      </ol>
    </div>

    <div class="column-third">
      <h2 class="heading-medium">Icons</h2>
      <ul class="example-icon-list">
        <li>
          <i class="icon icon-calendar"></i>
          <p>icon-calendar.png</p>
        </li>
        <li>
          <i class="icon icon-file-download"></i>
          <p>icon-file-download.png</p>
        </li>
        <li>
          <i class="icon icon-important"></i>
          <p>icon-important.png</p>
        </li>
        <li>
          <i class="icon icon-information"></i>
          <p>icon-information.png</p>
        </li>
        <li>
          <i class="icon icon-locator"></i>
          <p>icon-locator.png</p>
        </li>
      </ul>

    </div>

    <div class="column-third">
      <h2 class="heading-medium">White or semi-transparent icons</h2>
      <ul class="example-icon-list example-icon-list-background">
        <li>
          <i class="icon-pointer"></i>
          <p>icon-pointer.png</p>
        </li>
        <li>
          <i class="icon-pointer-black"></i>
          <p>icon-pointer-black.png</p>
        </li>
        <li>
          <i class="icon-search"></i>
          <p>icon-search.png</p>
        </li>
      </ul>
    </div>

  </div>

</main><!-- /#content-->
{{/content}}
<commit_msg>Add missing base 'icon' classes<commit_after>{{<layout_example}}

{{$pageTitle}}Example: Icons — Icons and images — GOV.UK elements{{/pageTitle}}

{{$content}}
<main id="content" role="main">

  {{>breadcrumb}}

  <style>
  .example-icon-list p { font-size: 16px; }
  .example-icon-list-background { background-color: #d3d3d3; padding: 15px; }
  </style>

  <div class="grid-row">
    <div class="column-two-thirds">

      <h1 class="heading-xlarge">
        <span class="heading-secondary">Icons and images</span>
        Example: Icons
      </h1>

      <p class="text">
        This test page shows the icons which are included in the govuk frontend toolkit.
      </p>

    </div>
  </div>

  <div class="grid-row">

    <div class="column-third">
      <h2 class="heading-medium">Step icons</h2>
      <ol class="example-icon-list">
        <li><i class="icon icon-step-1"></i> <p>icon-step-1.png</p></li>
        <li><i class="icon icon-step-2"></i> <p>icon-step-2.png</p></li>
        <li><i class="icon icon-step-3"></i> <p>icon-step-3.png</p></li>
        <li><i class="icon icon-step-4"></i> <p>icon-step-4.png</p></li>
        <li><i class="icon icon-step-5"></i> <p>icon-step-5.png</p></li>
        <li><i class="icon icon-step-6"></i> <p>icon-step-6.png</p></li>
        <li><i class="icon icon-step-7"></i> <p>icon-step-7.png</p></li>
        <li><i class="icon icon-step-8"></i> <p>icon-step-8.png</p></li>
        <li><i class="icon icon-step-9"></i> <p>icon-step-9.png</p></li>
        <li><i class="icon icon-step-10"></i> <p>icon-step-10.png</p></li>
        <li><i class="icon icon-step-11"></i> <p>icon-step-11.png</p></li>
        <li><i class="icon icon-step-12"></i> <p>icon-step-12.png</p></li>
        <li><i class="icon icon-step-13"></i> <p>icon-step-13.png</p></li>
        <li><i class="icon icon-step-14"></i> <p>icon-step-14.png</p></li>
      </ol>
    </div>

    <div class="column-third">
      <h2 class="heading-medium">Icons</h2>
      <ul class="example-icon-list">
        <li>
          <i class="icon icon-calendar"></i>
          <p>icon-calendar.png</p>
        </li>
        <li>
          <i class="icon icon-file-download"></i>
          <p>icon-file-download.png</p>
        </li>
        <li>
          <i class="icon icon-important"></i>
          <p>icon-important.png</p>
        </li>
        <li>
          <i class="icon icon-information"></i>
          <p>icon-information.png</p>
        </li>
        <li>
          <i class="icon icon-locator"></i>
          <p>icon-locator.png</p>
        </li>
      </ul>

    </div>

    <div class="column-third">
      <h2 class="heading-medium">White or semi-transparent icons</h2>
      <ul class="example-icon-list example-icon-list-background">
        <li>
          <i class="icon icon-pointer"></i>
          <p>icon-pointer.png</p>
        </li>
        <li>
          <i class="icon icon-pointer-black"></i>
          <p>icon-pointer-black.png</p>
        </li>
        <li>
          <i class="icon icon-search"></i>
          <p>icon-search.png</p>
        </li>
      </ul>
    </div>

  </div>

</main><!-- /#content-->
{{/content}}

{'fraction_non_alphanumeric': 0.23024109851508862, 'fraction_numerical': 0.016924796423439248, 'mean_word_length': 2.1636363636363636, 'pattern_counts': {'":': 0, '<': 339, '<?xml version=': 0, '>': 339, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1765433', 'n_tokens_mistral': 2396, 'n_tokens_neox': 2333, 'n_words': 395}