<commit_before>---
name: Signed Out
description:
  The Masthead is the first component on a page and includes navigation elements.
information:
  - The secondary navigation, search field, and additional information sections are optional.
  - You should set the variable $main-nav-breakpoint to the point that your app needs to switch from mobile navigation
    to the wide secondary navigation.
  - You should also set the variable $mobile-masthead-height so that the mobile nav scrolling has enough room.
  - In Internet Explorer 11, the narrow masthead will not be fixed in place.
order: 1
---
<header class="sprk-c-Masthead sprk-o-Stack" role="banner" idString="masthead-1">
  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--split@xxs">
    <div class="sprk-c-Masthead__menu sprk-o-Stack__item sprk-o-Box">
      <button class="sprk-c-Menu" type="button" aria-expanded="false" data-sprk-mobile-nav-trigger="mobileNav">
        <span class="sprk-u-ScreenReaderText">Toggle Navigation</span>
        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Menu__icon" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
          <g>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--two" d="m8 32h48"/>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--one" d="m8 18.68h48"/>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--three" d="m8 45.32h48"/>
          </g>
        </svg>
      </button>
    </div>

    <div class="sprk-c-Masthead__logo sprk-o-Stack__item sprk-o-Stack__item--center-column@xxs sprk-o-Box">
      <a href="#">
        <img src="/assets/toolkit/images/spark-placeholder.jpg" alt="Spark Design System" />
      </a>
    </div>

   <nav role="navigation" class="sprk-c-Masthead__little-nav sprk-o-Stack__item sprk-o-Stack__item--flex@xxs sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xxs sprk-o-Stack--end-row sprk-o-Box">
    <ul class="sprk-c-Masthead__site-links sprk-o-Stack__item sprk-o-HorizontalList sprk-o-HorizontalList--spacing-large sprk-o-Stack__item--center-column">
        <li>
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
            Item 2
          </a>
        </li>
      </ul>

    <ul class="sprk-o-Stack__item sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium sprk-o-Stack--center-column">
      <li>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">
          (000) 123-4567
        </a>
      </li>

      <li>
        <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
          Talk To Us
        </a>
      </li>

      <li>
        <a class="sprk-c-Button sprk-c-Button--secondary" href="#nogo">
          Sign In
        </a>
      </li>
    </ul>
  </nav>

  <div class="sprk-o-Stack__item">
    <div class="sprk-u-Display--none">
      {{#embed "patterns.components.masthead.navigation.big-nav" }}{{/embed}}
    </div>

    <div class="sprk-c-Masthead__narrow-nav sprk-u-Display--none" data-sprk-mobile-nav="mobileNav">
      <nav role="navigation" data-id="navigation-narrow-1">
        <ul class="sprk-c-Accordion sprk-c-Accordion--navigation sprk-b-List sprk-b-List--bare">
          <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
            <a aria-controls="details1" class="sprk-c-Accordion__summary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
              <span class="sprk-b-TypeBodyOne sprk-c-Accordion__heading">
                Item 1<commit_msg>remove big nav from signed in<commit_after>---
name: <NAME>
description:
  The Masthead is the first component on a page and includes navigation elements.
information:
  - The secondary navigation, search field, and additional information sections are optional.
  - You should set the variable $main-nav-breakpoint to the point that your app needs to switch from mobile navigation
    to the wide secondary navigation.
  - You should also set the variable $mobile-masthead-height so that the mobile nav scrolling has enough room.
  - In Internet Explorer 11, the narrow masthead will not be fixed in place.
order: 1
---
<header class="sprk-c-Masthead sprk-o-Stack" role="banner" idString="masthead-1">
  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--split@xxs">
    <div class="sprk-c-Masthead__menu sprk-o-Stack__item sprk-o-Box">
      <button class="sprk-c-Menu" type="button" aria-expanded="false" data-sprk-mobile-nav-trigger="mobileNav">
        <span class="sprk-u-ScreenReaderText">Toggle Navigation</span>
        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Menu__icon" aria-hidden="true" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
          <g>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--two" d="m8 32h48"/>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--one" d="m8 18.68h48"/>
            <path class="sprk-c-Menu__line sprk-c-Menu__line--three" d="m8 45.32h48"/>
          </g>
        </svg>
      </button>
    </div>

    <div class="sprk-c-Masthead__logo sprk-o-Stack__item sprk-o-Stack__item--center-column@xxs sprk-o-Box">
      <a href="#">
        <img src="/assets/toolkit/images/spark-placeholder.jpg" alt="Spark Design System" />
      </a>
    </div>

   <nav role="navigation" class="sprk-c-Masthead__little-nav sprk-o-Stack__item sprk-o-Stack__item--flex@xxs sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xxs sprk-o-Stack--end-row sprk-o-Box">
    <ul class="sprk-c-Masthead__site-links sprk-o-Stack__item sprk-o-HorizontalList sprk-o-HorizontalList--spacing-large sprk-o-Stack__item--center-column">
        <li>
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
            Item 2
          </a>
        </li>
      </ul>

    <ul class="sprk-o-Stack__item sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium sprk-o-Stack--center-column">
      <li>
        <a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">
          (000) 123-4567
        </a>
      </li>

      <li>
        <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">
          Talk To Us
        </a>
      </li>

      <li>
        <a class="sprk-c-Button sprk-c-Button--secondary" href="#nogo">
          Sign In
        </a>
      </li>
    </ul>
  </nav>

  <div class="sprk-o-Stack__item">
    <div class="sprk-c-Masthead__narrow-nav sprk-u-Display--none" data-sprk-mobile-nav="mobileNav">
      <nav role="navigation" data-id="navigation-narrow-1">
        <ul class="sprk-c-Accordion sprk-c-Accordion--navigation sprk-b-List sprk-b-List--bare">
          <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
            <a aria-controls="details1" class="sprk-c-Accordion__summary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
              <span class="sprk-b-TypeBodyOne sprk-c-Accordion__heading">
                Item 1
{'fraction_non_alphanumeric': 0.1570817818231968, 'fraction_numerical': 0.013515377189353193, 'mean_word_length': 2.638735574510788, 'pattern_counts': {'":': 0, '<': 112, '<?xml version=': 0, '>': 112, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, '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': '1362638', 'n_tokens_mistral': 2658, 'n_tokens_neox': 2552, 'n_words': 509}