<commit_before>{% extends "layout.html" %}

{% block page_title %}
Style guide - Header
{% endblock %}

{% block content %}

{% set active = "style_guide" %}
{% include "includes/top_nav.html" %}

<main id="content" class="font-ui" role="main">

  <div class="grid-row">
    <div class="column-full">
      <h1 class="heading-section">Header</h1>
    </div>

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

      <p class="font-ui lede">The header is a familiar landmark that appears throughout the service at the top of every view.</p>

    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Header</h2>
        <div class="example example-images">
          <div class="grid-row">

            <!-- Header example -->
            <header>
              <div class="font-ui wrapper-header">
                <div class="header-title">
                  <a href="#0" class="header-name">Service name</a>
                </div>
                <div class="header-menu">
                  <ul>
                    <li><a href="#0">Search</a></li>
                    <li><a href="#0">Sign out</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <div id="global-header-bar-internal"></div>

          </div>
        </div>
      </section>
    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Header with heading section</h2>
        <div class="example example-images">
          <div class="grid-row">

            <!-- Header example -->
            <header>
              <div class="font-ui wrapper-header">
                <div class="header-title">
                  <a href="#0" class="header-name">Service name</a>
                </div>
                <div class="header-menu">
                  <ul>
                    <li><a href="#0">Search</a></li>
                    <li><a href="#0">Sign out</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <div id="global-header-bar-internal"></div>

            <!-- Heading section -->
            <section class="section-heading">

              <div class="breadcrumbs" style="padding-top: 0.50em;padding-bottom: 0.25em;">
            	  <ol role="breadcrumbs">
            	    <li><a href="#0" style="font-size:14px;">Style guide</a></li>
            	    <li><a href="#0" style="font-size:14px;">Header</a></li>
            	  </ol>
            	</div>
              <h1 class="font-ui heading-large" style="margin-top: 0;">Heading large</h1>
            </section>

          </div>
        </div>
      </section>
    </div>

    <div class="column-two-thirds">
      <section>
        <h2 class="font-ui heading-medium">Sizing</h2>
        <p>It's important the header doesn't dominate. The service name should be 22px and any menu items 17px.</p>
        <p>The header height should be 50px.</p>
      </section>
<commit_msg>fix: small change to lede for header style<commit_after>{% extends "layout.html" %}

{% block page_title %}
Style guide - Header
{% endblock %}

{% block content %}

{% set active = "style_guide" %}
{% include "includes/top_nav.html" %}

<main id="content" class="font-ui" role="main">

  <div class="grid-row">
    <div class="column-full">
      <h1 class="heading-section">Header</h1>
    </div>

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

      <p class="font-ui lede">Header with the service name and optional menu items. Purple border is a hint to the Home Office brand.</p>

    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Header</h2>
        <div class="example example-images">
          <div class="grid-row">

            <!-- Header example -->
            <header>
              <div class="font-ui wrapper-header">
                <div class="header-title">
                  <a href="#0" class="header-name">Service name</a>
                </div>
                <div class="header-menu">
                  <ul>
                    <li><a href="#0">Search</a></li>
                    <li><a href="#0">Sign out</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <div id="global-header-bar-internal"></div>

          </div>
        </div>
      </section>
    </div>

    <div class="column-full">
      <section>
        <h2 class="font-ui heading-medium">Header with heading section</h2>
        <div class="example example-images">
          <div class="grid-row">

            <!-- Header example -->
            <header>
              <div class="font-ui wrapper-header">
                <div class="header-title">
                  <a href="#0" class="header-name">Service name</a>
                </div>
                <div class="header-menu">
                  <ul>
                    <li><a href="#0">Search</a></li>
                    <li><a href="#0">Sign out</a></li>
                  </ul>
                </div>
              </div>
            </header>
            <div id="global-header-bar-internal"></div>

            <!-- Heading section -->
            <section class="section-heading">

              <div class="breadcrumbs" style="padding-top: 0.50em;padding-bottom: 0.25em;">
            	  <ol role="breadcrumbs">
            	    <li><a href="#0" style="font-size:14px;">Style guide</a></li>
            	    <li><a href="#0" style="font-size:14px;">Header</a></li>
            	  </ol>
            	</div>
              <h1 class="font-ui heading-large" style="margin-top: 0;">Heading large</h1>
            </section>

          </div>
        </div>
      </section>
    </div>

    <div class="column-two-thirds">
      <section>
        <h2 class="font-ui heading-medium">Sizing</h2>
        <p>It's important the header content doesn't dominate. The service name should be 22px and any menu items 17px.</p>
        <p>The header height should be 50px.</p>
      </section>

{'fraction_non_alphanumeric': 0.16896265560165974, 'fraction_numerical': 0.011618257261410789, 'mean_word_length': 1.6041486603284356, 'pattern_counts': {'":': 0, '<': 207, '<?xml version=': 0, '>': 207, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6180391', 'n_tokens_mistral': 1864, 'n_tokens_neox': 1735, 'n_words': 396}