University of Florida College of the Arts Pattern Library

Quick Search: Default 

<div class="quick-search">
    <form role="search" method="get" id="quick-search-form" class="quick-search__form" action="">
        <input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input">
        <label for="quick-search-input" class="quick-search__input-label">
            Search the website
        </label>
        <div class="quick-search__icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25">
                <path class="_mark" fill="#fff" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
            </svg>
        </div>
        <input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
    </form>
</div>
 
<div class="quick-search">
   <form role="search" method="get" id="{{ id|default('quick-search') }}-form" class="quick-search__form" action="{{site.link}}">
       <input id="{{ id|default('quick-search') }}-input" name="s" type="text" placeholder="Search" class="quick-search__input">
       <label for="{{ id|default('quick-search') }}-input" class="quick-search__input-label">
           Search the website
       </label>
       <div class="quick-search__icon" aria-hidden="true">
           {% include 'bits/icons/search.twig' %}
       </div>
       <input aria-label="submit search query" class="quick-search__submit" type="submit" id="{{ id|default('quick-search') }}-submit" value="Search" />
   </form>
</div>
 
{
  "isLarge": false
}
  • Content: 
    .quick-search
    --borderColor blue200
    --iconColor white
    --textColor white

    padding 16px
    margin-top 36px


    &__form
        align-items center
        display inline-flex
        justify-content space-between
        width 100%

    &__icon
        display flex
        margin-left -16px
        transform translateX(-16px)

        svg ._mark
            fill var(--iconColor)

    &__input-label
        @extends $invisible

    &__input
        border 1px solid var(--borderColor)
        border-radius 4px
        font-size bodyLarge
        color var(--textColor)
        width 100%
        padding 8px 32px 8px 8px
        &::placeholder
            color var(--borderColor)


    &__submit
        @extends $invisible
  • URL: /components/raw/quick-search/quick-search.styl
  • Filesystem Path: patterns/bits/quick-search/quick-search.styl
  • Size: 745 Bytes

No notes defined.