Skip to main content Skip to docs navigation
View on GitHub

Search

Display the search form and search results on your website.

On this page

Examples

Search form

This example demonstrates a quick and easy way to add the Search component to your webpage:

html 
<form class="search-form">
  <label for="search-form-keywords">Search</label>

  <div class="search-form-inputs">
    <input type="search" id="search-form-keywords" name="keywords" placeholder="Search…">
    <button type="submit">
      <svg class="of-icon" width="32" height="32" fill="currentColor">
      	<use href="/assets/icons/bootstrap-icons.svg#search"/>
      </svg>
      

      <span class="visually-hidden">Search</span>
    </button>
  </div>
</form>

Autocomplete

You can add the autocomplete feature to the Search component using the <datalist> element, which allows a user to pick up the suggestions from the predefined list of options:

Hint: use the search suggestions for more accurate search results.
html 
<form class="search-form">
  <label for="search-form-keywords">Search</label>

  <div class="search-form-inputs">
    <input type="search" list="search-autocomplete" id="search-form-keywords" name="keywords" placeholder="Type something…" autocomplete="off">
    <button type="submit">Search</button>
  </div>

  <div class="form-text">Hint: use the search suggestions for more accurate search results.</div>

  <datalist id="search-autocomplete">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
    <option value="Mint"></option>
    <option value="Strawberry"></option>
    <option value="Vanilla"></option>
  </datalist>
</form>

Search result

The markup below shows how you can display the search result on your page:

PlaceholderPreview

Mea culpa

Incididunt id commodo laboris. Laborum culpa anim excepteur duis tempor exercitation consectetur deserunt aliqua duis nostrud culpa. Mollit id ut id sunt magna amet.

https://example.tld/lorem/mea-culpa.html

html 
<div class="search-result">
  <figure class="search-result-image">
    <img src="..." alt="...">
  </figure>

  <div class="search-result-content">
    <h4><a href="#">Mea culpa</a></h4>
    <p>Incididunt id commodo laboris. Laborum <mark>culpa</mark> anim excepteur duis tempor exercitation consectetur deserunt aliqua duis nostrud <mark>culpa</mark>. Mollit id ut id sunt magna amet.</p>
    <p class="search-result-url">https://example.tld/lorem/mea-culpa.html</p>
  </div>
</div>

CSS

Variables

Search result variables:

src/scss/_search.scss 
--#{$prefix}search-result-border-width: #{$search-result-border-width};
--#{$prefix}search-result-border-color: #{$search-result-border-color};
--#{$prefix}search-result-border-radius: #{$search-result-border-radius};
--#{$prefix}search-result-padding-x: #{$search-result-padding-x};
--#{$prefix}search-result-padding-y: #{$search-result-padding-y};
--#{$prefix}search-result-image-ratio: #{$search-result-image-ratio};
--#{$prefix}search-result-image-width: #{$search-result-image-width};
--#{$prefix}search-result-url-font-size: #{$search-result-url-font-size};

Sass variables

Search result variables:

src/scss/_variables.scss 
$search-result-border-width:  var(--#{$prefix}border-width);
$search-result-border-color:  var(--#{$prefix}border-color-translucent);
$search-result-border-radius: var(--#{$prefix}border-radius);
$search-result-image-ratio:   #{calc(16 / 9)};
$search-result-image-width:   25%;
$search-result-padding-x:     1rem;
$search-result-padding-y:     1rem;
$search-result-url-font-size: .85rem;