BBH

Search Box Hero 

<div class="c-search-box-hero">

    <div class="
  c-form-input

  

  

  
    has-icon
  
">

        <span class="
      c-form-input__icon

      
    ">

            <svg class="text-neutral-grey-02">
                <use xlink:href="#glas"></use>
            </svg>

        </span>

        <input class="c-form-input__field" type="text" placeholder="Was oder wen suchen Sie?">
    </div>

    <div class="
  c-form-input

  

  

  
    has-icon
  
">

        <span class="
      c-form-input__icon

      
        is-clickable
      
    ">

            <svg class="currentColor">
                <use xlink:href="#locate-a"></use>
            </svg>

        </span>

        <input class="c-form-input__field" type="text" placeholder="Hamburg">
    </div>

    <button class="
    c-button
    c-button--primary
    c-button--pill
    c-button--large

    
      has-full-width
    

    
  ">

        <span class="
        c-button__label

        

      ">Suchen</span>

    </button>
</div>
 
<div class="c-search-box-hero">

  {% render '@form-input', {
    icon: { svg: 'glas' },
    placeholder: 'Was oder wen suchen Sie?'
  } %}

  {% render '@form-input', {
    icon: {
      svg: 'locate-a',
      clickable: true
    },
    placeholder: 'Hamburg'
  } %}

  {% render '@button', {
    label: { default: 'Suchen' },
    variant: 'pill',
    fullWidth: true
  } %}
</div>
 
/* No context defined. */

No notes defined.