Stilguiden VGR

Quick Search - Dropdown 

<!-- Default -->
<div class="vgr-quick-search">
    <ul class="vgr-quick-search-list" id="vgr-quick-search">

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Evelyn Stolfer <span class="vgr-quick-search__id" title="VGR-id">evest2</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <strong>Flera Beställar-id</strong>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669239</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i70201</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Evelyn Svensson <span class="vgr-quick-search__id" title="VGR-id">evesv5</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36612</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3661222</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i90357</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Evelyn Andersson <span class="vgr-quick-search__id" title="VGR-id">evego1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36681</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3668141</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i11945</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Evelyn Serrano Hiles Kristensson <span class="vgr-quick-search__id" title="VGR-id">eveha1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36623</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <strong>Flera Ansvarsnummer</strong>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i98642</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Evelyn de la Fuente Soto <span class="vgr-quick-search__id" title="VGR-id">evede1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36691</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669172</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i9123</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item">
                <p class="vgr-quick-search__headline">Eva-Lena Wennerholm <span class="vgr-quick-search__id" title="VGR-id">evlwe1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36659</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3665918</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <strong>Flera I-nummer</strong>

                    </li>
                </ul>
            </div>

        </li>

    </ul>
    <a href="/" class="vgr-quick-search__more">
  Se fler resultat (99 stycken)
</a>

</div>


<!-- Aligned -->
<div class="vgr-quick-search">
    <ul class="vgr-quick-search-list">

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Evelyn Stolfer <span class="vgr-quick-search__id" title="VGR-id">evest2</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <strong>Flera Beställar-id</strong>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669239</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i70201</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Evelyn Svensson <span class="vgr-quick-search__id" title="VGR-id">evesv5</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36612</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3661222</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i90357</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Evelyn Andersson <span class="vgr-quick-search__id" title="VGR-id">evego1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36681</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3668141</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i11945</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Evelyn Serrano Hiles Kristensson <span class="vgr-quick-search__id" title="VGR-id">eveha1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36623</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <strong>Flera Ansvarsnummer</strong>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i98642</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Evelyn de la Fuente Soto <span class="vgr-quick-search__id" title="VGR-id">evede1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36691</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669172</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i9123</span>

                    </li>
                </ul>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
                <p class="vgr-quick-search__headline">Eva-Lena Wennerholm <span class="vgr-quick-search__id" title="VGR-id">evlwe1</span></p>
                <ul class="vgr-quick-search__inline-list">
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36659</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                        <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3665918</span>

                    </li>
                    <li class="vgr-quick-search__inline-list-item">
                        <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                        <strong>Flera I-nummer</strong>

                    </li>
                </ul>
            </div>

        </li>

    </ul>
    <a href="/" class="vgr-quick-search__more">
  Se fler resultat (99 stycken)
</a>

</div>


<!-- Photo -->
<div class="vgr-quick-search">
    <ul class="vgr-quick-search-list">

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-1.jpg" width="48" height="48" alt="Evelyn Stolfer">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Evelyn Stolfer <span class="vgr-quick-search__id" title="VGR-id">evest2</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <strong>Flera Beställar-id</strong>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669239</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i70201</span>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-2.jpg" width="48" height="48" alt="Evelyn Svensson">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Evelyn Svensson <span class="vgr-quick-search__id" title="VGR-id">evesv5</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36612</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3661222</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i90357</span>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-3.jpg" width="48" height="48" alt="Evelyn Andersson">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Evelyn Andersson <span class="vgr-quick-search__id" title="VGR-id">evego1</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36681</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3668141</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i11945</span>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-4.jpg" width="48" height="48" alt="Evelyn Serrano Hiles Kristensson">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Evelyn Serrano Hiles Kristensson <span class="vgr-quick-search__id" title="VGR-id">eveha1</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36623</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <strong>Flera Ansvarsnummer</strong>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i98642</span>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-5.jpg" width="48" height="48" alt="Evelyn de la Fuente Soto">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Evelyn de la Fuente Soto <span class="vgr-quick-search__id" title="VGR-id">evede1</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36691</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3669172</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">I-nummer</span> <span title="I-nummer">i9123</span>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

        <li class="vgr-quick-search-list-item">
            <div class="vgr-quick-search__item vgr-quick-search__item--photo">
                <div class="vgr-quick-search__item-img">
                    <img src="/temp/female-6.jpg" width="48" height="48" alt="Eva-Lena Wennerholm">
                </div>
                <div class="vgr-quick-search__item-content">
                    <p class="vgr-quick-search__headline">Eva-Lena Wennerholm <span class="vgr-quick-search__id" title="VGR-id">evlwe1</span></p>
                    <ul class="vgr-quick-search__inline-list">
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Beställar-ID">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FFC704" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.575 6.833H8.17c.282 0 .512-.065.693-.196.18-.13.27-.343.27-.637 0-.163-.03-.297-.09-.402-.06-.105-.14-.186-.24-.245-.1-.06-.216-.1-.346-.123-.13-.022-.266-.034-.407-.034H6.575v1.637zM5 4h3.37c.342 0 .653.03.934.088.28.06.522.155.723.29.2.133.356.312.466.534.11.222.166.496.166.823 0 .353-.086.647-.25.883-.164.235-.406.428-.727.578.44.124.77.342.988.652.218.31.327.685.327 1.123 0 .357-.07.66-.21.92-.14.258-.33.47-.57.633-.236.164-.507.285-.81.363-.306.08-.618.118-.94.118H5V4zm1.575 5.804H8.26c.155 0 .302-.015.442-.044.14-.03.265-.08.372-.147.107-.07.192-.162.255-.28.06-.117.092-.268.092-.45 0-.36-.104-.617-.31-.77-.21-.154-.483-.23-.824-.23H6.575v1.92z" fill="#000"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Beställar-id:</span> <span title="Beställar-id">36659</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="Ansvarsnummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#006CB6" cx="7.5" cy="7.5" r="7.5"/>
    <path d="M6.557 8.294h1.856l-.903-2.57h-.02l-.933 2.57zM6.707 4h1.615L11 11H9.365l-.54-1.56h-2.68L5.585 11H4l2.708-7z" fill="#FFF"/>
  </g>
</svg>

                            <span class="vgr-quick-search__inline-list-title">Ansvarsnummer:</span> <span title="Ansvarsnummer">3665918</span>

                        </li>
                        <li class="vgr-quick-search__inline-list-item">
                            <svg class="vgr-autocomplete__inline-list-icon" width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" aria-label="i-Nummer">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#FF6F19" cx="7.5" cy="7.5" r="7.5"/>
    <path fill="#FFF" d="M7 3v9h2V3"/>
  </g>
</svg>

                            <strong>Flera I-nummer</strong>

                        </li>
                    </ul>
                </div>
            </div>

        </li>

    </ul>
    <a href="/" class="vgr-quick-search__more">
  Se fler resultat (99 stycken)
</a>

</div>


<!-- Default -->
<div class="vgr-quick-search">
  <ul class="vgr-quick-search-list" id="vgr-quick-search">
    {% for item in items %}
    <li class="vgr-quick-search-list-item">
       {% render "@quick-search-item", item.itemData, true %}
    </li>
    {% endfor %}
  </ul>
  {% render "@quick-search-more" %}
</div>

<!-- Aligned -->
<div class="vgr-quick-search">
  <ul class="vgr-quick-search-list">
    {% for item in items %}
    <li class="vgr-quick-search-list-item">
       {% render "@quick-search-item--aligned", item.itemData, true %}
    </li>
    {% endfor %}
  </ul>
  {% render "@quick-search-more" %}
</div>

<!-- Photo -->
<div class="vgr-quick-search">
  <ul class="vgr-quick-search-list">
    {% for item in items %}
    <li class="vgr-quick-search-list-item">
       {% render "@quick-search-item--photo", item.itemData, true %}
    </li>
    {% endfor %}
  </ul>
  {% render "@quick-search-more" %}
</div>
 
/* Default */
{
  "blockData": {
    "title": "Sök Beställar-ID",
    "label": "Ange namn, VGR-id eller beställar-id",
    "button": "Sök"
  },
  "items": [
    {
      "itemData": {
        "headline": "Evelyn Stolfer",
        "photo": "/temp/female-1.jpg",
        "vgridResult": "evest2",
        "bestallaridResult": "36692",
        "ansvarsnummerResult": "3669239",
        "inummerResult": "i70201",
        "multipleBestallarid": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Svensson",
        "photo": "/temp/female-2.jpg",
        "vgridResult": "evesv5",
        "bestallaridResult": "36612",
        "ansvarsnummerResult": "3661222",
        "inummerResult": "i90357"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Andersson",
        "photo": "/temp/female-3.jpg",
        "vgridResult": "evego1",
        "bestallaridResult": "36681",
        "ansvarsnummerResult": "3668141",
        "inummerResult": "i11945"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Serrano Hiles Kristensson",
        "photo": "/temp/female-4.jpg",
        "vgridResult": "eveha1",
        "bestallaridResult": "36623",
        "ansvarsnummerResult": "3662310",
        "inummerResult": "i98642",
        "multipleAnsvarsnummer": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn de la Fuente Soto",
        "photo": "/temp/female-5.jpg",
        "vgridResult": "evede1",
        "bestallaridResult": "36691",
        "ansvarsnummerResult": "3669172",
        "inummerResult": "i9123"
      }
    },
    {
      "itemData": {
        "headline": "Eva-Lena Wennerholm",
        "photo": "/temp/female-6.jpg",
        "vgridResult": "evlwe1",
        "bestallaridResult": "36659",
        "ansvarsnummerResult": "3665918",
        "inummerResult": "i9123",
        "multipleInummer": true
      }
    }
  ]
}


/* Aligned */
{
  "blockData": {
    "title": "Sök Beställar-ID",
    "label": "Ange namn, VGR-id eller beställar-id",
    "button": "Sök"
  },
  "items": [
    {
      "itemData": {
        "headline": "Evelyn Stolfer",
        "photo": "/temp/female-1.jpg",
        "vgridResult": "evest2",
        "bestallaridResult": "36692",
        "ansvarsnummerResult": "3669239",
        "inummerResult": "i70201",
        "multipleBestallarid": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Svensson",
        "photo": "/temp/female-2.jpg",
        "vgridResult": "evesv5",
        "bestallaridResult": "36612",
        "ansvarsnummerResult": "3661222",
        "inummerResult": "i90357"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Andersson",
        "photo": "/temp/female-3.jpg",
        "vgridResult": "evego1",
        "bestallaridResult": "36681",
        "ansvarsnummerResult": "3668141",
        "inummerResult": "i11945"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Serrano Hiles Kristensson",
        "photo": "/temp/female-4.jpg",
        "vgridResult": "eveha1",
        "bestallaridResult": "36623",
        "ansvarsnummerResult": "3662310",
        "inummerResult": "i98642",
        "multipleAnsvarsnummer": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn de la Fuente Soto",
        "photo": "/temp/female-5.jpg",
        "vgridResult": "evede1",
        "bestallaridResult": "36691",
        "ansvarsnummerResult": "3669172",
        "inummerResult": "i9123"
      }
    },
    {
      "itemData": {
        "headline": "Eva-Lena Wennerholm",
        "photo": "/temp/female-6.jpg",
        "vgridResult": "evlwe1",
        "bestallaridResult": "36659",
        "ansvarsnummerResult": "3665918",
        "inummerResult": "i9123",
        "multipleInummer": true
      }
    }
  ]
}


/* Photo */
{
  "blockData": {
    "title": "Sök Beställar-ID",
    "label": "Ange namn, VGR-id eller beställar-id",
    "button": "Sök"
  },
  "items": [
    {
      "itemData": {
        "headline": "Evelyn Stolfer",
        "photo": "/temp/female-1.jpg",
        "vgridResult": "evest2",
        "bestallaridResult": "36692",
        "ansvarsnummerResult": "3669239",
        "inummerResult": "i70201",
        "multipleBestallarid": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Svensson",
        "photo": "/temp/female-2.jpg",
        "vgridResult": "evesv5",
        "bestallaridResult": "36612",
        "ansvarsnummerResult": "3661222",
        "inummerResult": "i90357"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Andersson",
        "photo": "/temp/female-3.jpg",
        "vgridResult": "evego1",
        "bestallaridResult": "36681",
        "ansvarsnummerResult": "3668141",
        "inummerResult": "i11945"
      }
    },
    {
      "itemData": {
        "headline": "Evelyn Serrano Hiles Kristensson",
        "photo": "/temp/female-4.jpg",
        "vgridResult": "eveha1",
        "bestallaridResult": "36623",
        "ansvarsnummerResult": "3662310",
        "inummerResult": "i98642",
        "multipleAnsvarsnummer": true
      }
    },
    {
      "itemData": {
        "headline": "Evelyn de la Fuente Soto",
        "photo": "/temp/female-5.jpg",
        "vgridResult": "evede1",
        "bestallaridResult": "36691",
        "ansvarsnummerResult": "3669172",
        "inummerResult": "i9123"
      }
    },
    {
      "itemData": {
        "headline": "Eva-Lena Wennerholm",
        "photo": "/temp/female-6.jpg",
        "vgridResult": "evlwe1",
        "bestallaridResult": "36659",
        "ansvarsnummerResult": "3665918",
        "inummerResult": "i9123",
        "multipleInummer": true
      }
    }
  ]
}
  • Content: 
    .awesomplete [hidden] {
  display: none;
}

.awesomplete .visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.awesomplete {
  display: flex;
  flex: 1;
  position: relative;
  margin-right: .625rem;
}

.awesomplete > input {
  display: block;
}

.awesomplete > ul {
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  z-index: 1;
  min-width: 100%;
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  background: #fff;

  border: 1px solid #CCC;
  border-top: none;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: 0 .3125rem 1rem 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
}

.awesomplete > ul:empty {
  display: none;
}

.awesomplete > ul {
}

@supports (transform: scale(0)) {
  .awesomplete {
    > ul {
      transition: .3s cubic-bezier(.4,.2,.5,1.4);
      transform-origin: 1.43em -.43em;

      &[hidden],
      &:empty {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease;
      }
    }
  }
}

.awesomplete {
  > ul {


    > li {
      position: relative;
      cursor: pointer;

      &:hover {
        background: $color-gray-100;
      }

      &[aria-selected="true"] {
        background: $theme-color;
        color: $theme-on-color;

        mark {
          color: inherit;
        }
      }
    }
  }
}
  • URL: /components/raw/quick-search/_awesomplete.scss
  • Filesystem Path: components/components/search/quick-search/_awesomplete.scss
  • Size: 1.4 KB
  • Content: 
    .vgr-quick-search {
  border: 1px solid #CCC;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: 0 .3125rem 1rem 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  mark {
    font-weight: 700;
    background: transparent
  }
}
  • URL: /components/raw/quick-search/_quick-search.scss
  • Filesystem Path: components/components/search/quick-search/_quick-search.scss
  • Size: 342 Bytes

There are no notes for this item.