# Search Form

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="search-hero">
        <div class="page-layout-md--default">
            <form class="search-form">
                <input type="search" class="search-form__input" />
                <button type="submit" class="search-form__btn" title="Search">
                    <span class="icon icon--medium icon-search icon--brand-primary"></span>
                </button>
            </form>
        </div>
    </div>

`
`

    <div class="search-hero">
        <div class="page-layout-md--default">
            <form class="search-form">
                <input type="search" class="search-form__input" />
                <button type="submit" class="search-form__btn" title="Search">
                    <span class="icon icon--medium icon-search icon--brand-primary"></span>
                </button>
            </form>
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .search-hero {
        overflow: hidden;
        background-color: $search-field-background;
      }

      .search-form {
        display: flex;
        grid-area: center;
        align-items: center;

        background-color: $search-field-background;
        border-bottom: 4px solid$search-field-border-color;
      }

      .search-form__input {
        @extend %heading-font-bold;

        display: block;

        width: 100%;

        line-height: 1.5em; // don't cut off descenders Chrome/FF
        color: $search-field-color;

        appearance: none;
        background-color: $search-field-background;
        border: 0;
        outline: none;
        caret-color: $search-field-caret-color;
      }

      .search-form__btn {
        background-color: transparent;
        border: 0;

        .icon-search {
          width: 1rem;
          height: 1rem;
        }
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .search-form {
          font-size: $font-size-xl;
        }

        .search-form__btn {
          .icon-search {
            width: 2rem;
            height: 2rem;
          }
        }
      }

  `
- URL: /components/raw/search-form/_search-form.scss
- Filesystem Path: components/04-molecules/search/search-form/_search-form.scss
- Size: 907 Bytes

- Handle: @search-form
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/search/search-form/search-form.html

No notes defined.