search suggestions

table of content

component variations

default

Open on blank page
<ul class="a-search-suggestions">
  <li class="a-search-suggestions__item">
    <a href="#" class="a-search-suggestions__result-link">
      <em>Product XYZ</em>
      Lorem ipsum dolor
    </a>
  </li>
  <li class="a-search-suggestions__item">
    <a href="#" class="a-search-suggestions__result-link">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr Product XYZ
      another line can be very long or very short, however when text breaks and
      the Product XYZ is mentioned again,
      <em>we should highlight this</em>
    </a>
  </li>
  <li class="a-search-suggestions__item">
    <a href="#" class="a-search-suggestions__result-link">
      Lorem ipsum
      <em>Product XYZ</em>
    </a>
  </li>
  <li class="a-search-suggestions__item">
    <a href="#" class="a-search-suggestions__result-link">
      <em>Product XYZ</em>
      Lorem ipsum dolor
    </a>
  </li>
  <li class="a-search-suggestions__item a-search-suggestions__results-link">
    <div class="a-link -icon">
      <a href="/" target="_self">
        <span>All</span>
        <span>
          Results
          <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
        </span>
      </a>
    </div>
  </li>
</ul>

additional content

styles SCSS

.a-search-suggestions {
  margin: 0;
  padding: 1rem;

  a,
  a:visited {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &__item {
    /* stylelint-disable-next-line a11y/content-property-no-static-value */
    &::before {
      content: none;
    }

    padding: 0;
    margin-bottom: 1rem;
  }

  &__result-link,
  &__result-link:visited {
    color: var(--integrated__enabled__front__default);

    em {
      font-style: normal;
      font-weight: bold;
    }
  }

  &__result-link {
    display: inline-block;
  }

  &__results-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}