Search Header Complete

<div class="c-page-header__search u-background-color--gray--light can-be--dark-dark u-padding--double--top u-padding--double--bottom">
  <div class="l-grid l-grid--7-col u-shift--left--1-col--at-large u-spacing--until-medium">
    <div class="l-grid-item l-grid-item--m--3-col">
      <input type="search" name="s" class="u-font--secondary--s u-theme--color--darker o-input__search" value="Search..." />
    </div>
    <div class="l-grid-item l-grid-item--m--3-col">
      <div class="u-flex">
        <button class="c-filter__button o-button u-space--right"><span class="u-icon u-icon--xs u-path-fill--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
</span>Search</button> <!-- /.search-form__submit -->
        <span class="c-filter__toggle js-toggle o-button o-button--simple" data-toggled="c-filter" data-prefix="c-filter"><span class="u-icon u-icon--xs"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><title>Pattern Lab Tools</title><path fill="#808080" d="M12.767 8.343c-0.735-1.272-0.293-2.903 0.986-3.643l-1.376-2.383c-0.393 0.23-0.85 0.363-1.338 0.363-1.47 0-2.662-1.2-2.662-2.68h-2.752c0.004 0.457-0.11 0.92-0.355 1.343-0.735 1.272-2.367 1.705-3.649 0.967l-1.376 2.383c0.396 0.225 0.739 0.555 0.983 0.977 0.733 1.27 0.294 2.897-0.98 3.64l1.376 2.383c0.392-0.228 0.847-0.359 1.332-0.359 1.466 0 2.654 1.192 2.662 2.665h2.752c-0.001-0.452 0.113-0.91 0.355-1.329 0.733-1.27 2.362-1.703 3.642-0.971l1.376-2.383c-0.393-0.225-0.734-0.554-0.977-0.974zM7 9.835c-1.566 0-2.835-1.269-2.835-2.835s1.269-2.835 2.835-2.835c1.566 0 2.835 1.269 2.835 2.835s-1.269 2.835-2.835 2.835z"></path></svg>
</span></span>
      </div>
    </div>
  </div>
  <div class="c-filter">
    <form class="c-filter__form u-padding--top">
      <div class="l-grid l-grid--7-col u-shift--left--1-col--at-large u-spacing--until-medium">
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Media</h3>
                                    <div class="c-filter__form-group">
                <input id="radio-1" type="radio" name="radio" value="Option 1" />
                <label for="radio-1">Option 1</label>
              </div>
                          <div class="c-filter__form-group">
                <input id="radio-2" type="radio" name="radio" value="Option 2" />
                <label for="radio-2">Option 2</label>
              </div>
                              </div>
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Category</h3>
                                    <div class="c-filter__form-group">
                <input id="checkbox-1" type="checkbox" name="checkbox" value="Option 1" />
                <label for="checkbox-1">Option 1</label>
              </div>
                          <div class="c-filter__form-group">
                <input id="checkbox-2" type="checkbox" name="checkbox" value="Option 2" />
                <label for="checkbox-2">Option 2</label>
              </div>
                              </div>
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Category</h3>
                                    <div class="c-filter__form-group">
                <input id="radio-1" type="radio" name="radio" value="Option 1" />
                <label for="radio-1">Option 1</label>
              </div>
                          <div class="c-filter__form-group">
                <input id="radio-2" type="radio" name="radio" value="Option 2" />
                <label for="radio-2">Option 2</label>
              </div>
                              </div>
        <div class="l-grid-item--7-col u-space--after-medium">
          <button class="o-button o-button--outline"><span class="u-icon u-icon--xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
</span>Search Again</button>
        </div>
      </div>
    </form><!-- ./c-filter__form -->
  </div><!-- ./c-filter -->
</div>

<div class="c-page-header__search u-background-color--gray--light can-be--dark-dark u-padding--double--top u-padding--double--bottom">
  <div class="l-grid l-grid--7-col u-shift--left--1-col--at-large u-spacing--until-medium">
    <div class="l-grid-item l-grid-item--m--3-col">
      <input type="search" name="s" class="u-font--secondary--s u-theme--color--darker o-input__search" value="Search..." />
    </div>
    <div class="l-grid-item l-grid-item--m--3-col">
      <div class="u-flex">
        <button class="c-filter__button o-button u-space--right"><span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/icon-search.twig' %}</span>Search</button> <!-- /.search-form__submit -->
        <span class="c-filter__toggle js-toggle o-button o-button--simple" data-toggled="c-filter" data-prefix="c-filter"><span class="u-icon u-icon--xs">{% include '@atoms/icons/icon-settings.twig' %}</span></span>
      </div>
    </div>
  </div>
  <div class="c-filter">
    <form class="c-filter__form u-padding--top">
      <div class="l-grid l-grid--7-col u-shift--left--1-col--at-large u-spacing--until-medium">
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Media</h3>
          {% if search_filter.radio %}
            {% for item in search_filter.radio %}
              <div class="c-filter__form-group">
                <input id="radio-{{ item.id }}" type="radio" name="radio" value="{{ item.label }}" />
                <label for="radio-{{ item.id }}">{{ item.label }}</label>
              </div>
            {% endfor %}
          {% endif %}
        </div>
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Category</h3>
          {% if search_filter.checkbox %}
            {% for item in search_filter.checkbox %}
              <div class="c-filter__form-group">
                <input id="checkbox-{{ item.id }}" type="checkbox" name="checkbox" value="{{ item.label }}" />
                <label for="checkbox-{{ item.id }}">{{ item.label }}</label>
              </div>
            {% endfor %}
          {% endif %}
        </div>
        <div class="c-filter__form-item u-spacing--half l-grid-item l-grid-item--s--2-col l-grid-item--l--1-col">
          <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-color--gray can-be--lighter">Category</h3>
          {% if search_filter.radio %}
            {% for item in search_filter.radio %}
              <div class="c-filter__form-group">
                <input id="radio-{{ item.id }}" type="radio" name="radio" value="{{ item.label }}" />
                <label for="radio-{{ item.id }}">{{ item.label }}</label>
              </div>
            {% endfor %}
          {% endif %}
        </div>
        <div class="l-grid-item--7-col u-space--after-medium">
          <button class="o-button o-button--outline"><span class="u-icon u-icon--xs">{% include '@atoms/icons/icon-search.twig' %}</span>Search Again</button>
        </div>
      </div>
    </form><!-- ./c-filter__form -->
  </div><!-- ./c-filter -->
</div>