search suggestions

table of content

component variations

default

Open on blank page
All Results
<div class="a-search-suggestions">
  <ul>
    <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>
  </ul>
  <div class="a-link -icon a-search-suggestions__results-link">
    <a href="/" target="_self" tabindex="-1">
      <span>All</span>
      <span>
        Results
        <i class="a-icon ui-ic-nosafe-lr-right-small"></i>
      </span>
    </a>
  </div>
</div>

additional content

styles SCSS

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

  ul {
    margin: 0;
    padding: 0;
  }

  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: 2rem 0 1rem;
  }
}