Stilguiden VGR

Quick Search - Item 

<!-- Default -->
<div class="vgr-quick-search__item">
    <p class="vgr-quick-search__headline">Title <span class="vgr-quick-search__id" title="VGR-id">VGR-id</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">X</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">X</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">X</span>

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


<!-- Aligned -->
<div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
    <p class="vgr-quick-search__headline">Title <span class="vgr-quick-search__id" title="VGR-id">VGR-id</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">X</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">X</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">X</span>

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


<!-- Linked -->
<a href="#" class="vgr-quick-search__item">
    <p class="vgr-quick-search__headline">Title <span class="vgr-quick-search__id" title="VGR-id">VGR-id</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">X</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">X</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">X</span>

        </li>
    </ul>
</a>


<!-- Photo -->
<div class="vgr-quick-search__item vgr-quick-search__item--photo">
    <div class="vgr-quick-search__item-img">
        <img src="http://via.placeholder.com/48x48" width="48" height="48" alt="Title">
    </div>
    <div class="vgr-quick-search__item-content">
        <p class="vgr-quick-search__headline">Title <span class="vgr-quick-search__id" title="VGR-id">VGR-id</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">X</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">X</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">X</span>

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


<!-- Default -->
<div class="vgr-quick-search__item">
  <p class="vgr-quick-search__headline">{{ headline }} <span class="vgr-quick-search__id" title="{{ vgrid }}">{{ vgridResult }}</span></p>
  <ul class="vgr-quick-search__inline-list">
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-bestallar-id" %}
      {% if multipleBestallarid %}
        <strong>{{ multipleBestallaridText }} {{ bestallarid }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ bestallarid }}:</span> <span title="{{ bestallarid }}">{{ bestallaridResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-ansvarsnummer" %}
        {% if multipleAnsvarsnummer %}
        <strong>{{ multipleAnsvarsnummerText }} {{ ansvarsnummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ ansvarsnummer }}:</span> <span title="{{ ansvarsnummer }}">{{ ansvarsnummerResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-i-nummer" %}
      {% if multipleInummer %}
        <strong>{{ multipleInummerText }} {{ inummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ inummer }}</span> <span title="{{ inummer }}">{{ inummerResult }}</span>
      {% endif %}
    </li>
  </ul>
</div>

<!-- Aligned -->
<div href="/" class="vgr-quick-search__item vgr-quick-search__item--aligned">
  <p class="vgr-quick-search__headline">{{ headline }} <span class="vgr-quick-search__id" title="{{ vgrid }}">{{ vgridResult }}</span></p>
  <ul class="vgr-quick-search__inline-list">
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-bestallar-id" %}
      {% if multipleBestallarid %}
        <strong>{{ multipleBestallaridText }} {{ bestallarid }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ bestallarid }}:</span> <span title="{{ bestallarid }}">{{ bestallaridResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-ansvarsnummer" %}
        {% if multipleAnsvarsnummer %}
        <strong>{{ multipleAnsvarsnummerText }} {{ ansvarsnummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ ansvarsnummer }}:</span> <span title="{{ ansvarsnummer }}">{{ ansvarsnummerResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-i-nummer" %}
      {% if multipleInummer %}
        <strong>{{ multipleInummerText }} {{ inummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ inummer }}</span> <span title="{{ inummer }}">{{ inummerResult }}</span>
      {% endif %}
    </li>
  </ul>
</div>

<!-- Linked -->
<a href="{{ url }}" class="vgr-quick-search__item">
  <p class="vgr-quick-search__headline">{{ headline }} <span class="vgr-quick-search__id" title="{{ vgrid }}">{{ vgridResult }}</span></p>
  <ul class="vgr-quick-search__inline-list">
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-bestallar-id" %}
      {% if multipleBestallarid %}
        <strong>{{ multipleBestallaridText }} {{ bestallarid }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ bestallarid }}:</span> <span title="{{ bestallarid }}">{{ bestallaridResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-ansvarsnummer" %}
        {% if multipleAnsvarsnummer %}
        <strong>{{ multipleAnsvarsnummerText }} {{ ansvarsnummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ ansvarsnummer }}:</span> <span title="{{ ansvarsnummer }}">{{ ansvarsnummerResult }}</span>
      {% endif %}
    </li>
    <li class="vgr-quick-search__inline-list-item">
      {% render "@icon-i-nummer" %}
      {% if multipleInummer %}
        <strong>{{ multipleInummerText }} {{ inummer }}</strong>
      {% else %}
        <span class="vgr-quick-search__inline-list-title">{{ inummer }}</span> <span title="{{ inummer }}">{{ inummerResult }}</span>
      {% endif %}
    </li>
  </ul>
</a>

<!-- Photo -->
<div class="vgr-quick-search__item vgr-quick-search__item--photo">
  <div class="vgr-quick-search__item-img">
    <img src="{{ photo }}" width="48" height="48" alt="{{ headline }}">
  </div>
  <div class="vgr-quick-search__item-content">
    <p class="vgr-quick-search__headline">{{ headline }} <span class="vgr-quick-search__id" title="{{ vgrid }}">{{ vgridResult }}</span></p>
    <ul class="vgr-quick-search__inline-list">
      <li class="vgr-quick-search__inline-list-item">
        {% render "@icon-bestallar-id" %}
        {% if multipleBestallarid %}
          <strong>{{ multipleBestallaridText }} {{ bestallarid }}</strong>
        {% else %}
          <span class="vgr-quick-search__inline-list-title">{{ bestallarid }}:</span> <span title="{{ bestallarid }}">{{ bestallaridResult }}</span>
        {% endif %}
      </li>
      <li class="vgr-quick-search__inline-list-item">
        {% render "@icon-ansvarsnummer" %}
          {% if multipleAnsvarsnummer %}
          <strong>{{ multipleAnsvarsnummerText }} {{ ansvarsnummer }}</strong>
        {% else %}
          <span class="vgr-quick-search__inline-list-title">{{ ansvarsnummer }}:</span> <span title="{{ ansvarsnummer }}">{{ ansvarsnummerResult }}</span>
        {% endif %}
      </li>
      <li class="vgr-quick-search__inline-list-item">
        {% render "@icon-i-nummer" %}
        {% if multipleInummer %}
          <strong>{{ multipleInummerText }} {{ inummer }}</strong>
        {% else %}
          <span class="vgr-quick-search__inline-list-title">{{ inummer }}</span> <span title="{{ inummer }}">{{ inummerResult }}</span>
        {% endif %}
      </li>
    </ul>
  </div>
</div>
 
/* Default */
{
  "headline": "Title",
  "url": "#",
  "photo": "http://via.placeholder.com/48x48",
  "multipleBestallaridText": "Flera",
  "multipleAnsvarsnummerText": "Flera",
  "multipleInummerText": "Flera",
  "vgrid": "VGR-id",
  "bestallarid": "Beställar-id",
  "ansvarsnummer": "Ansvarsnummer",
  "inummer": "I-nummer",
  "vgridResult": "VGR-id",
  "bestallaridResult": "X",
  "ansvarsnummerResult": "X",
  "inummerResult": "X"
}


/* Aligned */
{
  "headline": "Title",
  "url": "#",
  "photo": "http://via.placeholder.com/48x48",
  "multipleBestallaridText": "Flera",
  "multipleAnsvarsnummerText": "Flera",
  "multipleInummerText": "Flera",
  "vgrid": "VGR-id",
  "bestallarid": "Beställar-id",
  "ansvarsnummer": "Ansvarsnummer",
  "inummer": "I-nummer",
  "vgridResult": "VGR-id",
  "bestallaridResult": "X",
  "ansvarsnummerResult": "X",
  "inummerResult": "X"
}


/* Linked */
{
  "headline": "Title",
  "url": "#",
  "photo": "http://via.placeholder.com/48x48",
  "multipleBestallaridText": "Flera",
  "multipleAnsvarsnummerText": "Flera",
  "multipleInummerText": "Flera",
  "vgrid": "VGR-id",
  "bestallarid": "Beställar-id",
  "ansvarsnummer": "Ansvarsnummer",
  "inummer": "I-nummer",
  "vgridResult": "VGR-id",
  "bestallaridResult": "X",
  "ansvarsnummerResult": "X",
  "inummerResult": "X"
}


/* Photo */
{
  "headline": "Title",
  "url": "#",
  "photo": "http://via.placeholder.com/48x48",
  "multipleBestallaridText": "Flera",
  "multipleAnsvarsnummerText": "Flera",
  "multipleInummerText": "Flera",
  "vgrid": "VGR-id",
  "bestallarid": "Beställar-id",
  "ansvarsnummer": "Ansvarsnummer",
  "inummer": "I-nummer",
  "vgridResult": "VGR-id",
  "bestallaridResult": "X",
  "ansvarsnummerResult": "X",
  "inummerResult": "X"
}
  • Content: 
    .vgr-quick-search {

  $link-color: $theme-color;

  &__item {
    padding: 1rem;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #E6E6E6;

    @at-root {
      a#{&} {
        color: $text-color;

        .vgr-quick-search__headline {
          color: $link-color;
        }

        &:hover,
        &:focus {
          background: $link-color;
          color: #fff;

          .vgr-quick-search__headline,
          mark {
            color: #fff;
          }
        }
      }
    }
  }

  &__headline {
    margin: 0;
    font-size: .875rem;
  }

  &__id {
    &:before {
      content: "(";
    }
    &:after {
      content: ")";
    }
  }

  &__inline-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
  }

  &__inline-list-item {
    display: inline-block;
    margin-right: .625rem;
    white-space: nowrap;
  }

  &__inline-list-icon {
    vertical-align: text-bottom;
  }

  &__inline-list-title {
    display: none;

    @media screen and (min-width: $small) {
      display: inline;
    }
  }
}

// Aligned
.vgr-quick-search__item--aligned {
  .vgr-quick-search__inline-list {
    display: flex;
    flex-wrap: wrap;
  }

  .vgr-quick-search__inline-list-item {
    flex: 1 0 auto;
  }
}


// Photo
.vgr-quick-search__item--photo {
  display: flex;
}

.vgr-quick-search__item-img {
  margin-right: .5rem;
  display: none;
  border-radius: .25rem;
  overflow: hidden;
  width: 3rem;
  height: 3rem;

  @media screen and (min-width: $small) {
    display: block;
  }
}
  • URL: /components/raw/quick-search-item/_quick-search-item.scss
  • Filesystem Path: components/components/search/quick-search-item/_quick-search-item.scss
  • Size: 1.5 KB

There are no notes for this item.