Search Result

v0.0.0

Search Result snippet consisting of hyperlinked titles with related metadata and snippets.

The title shows in the dominant brand color when a page is not yet visited. When visited the title shows in one of the accent colors.

On focus, the Search Result shows a light border.

Clear browser history to reset the visited color.

Loko mustache letterpress williamsburg knausgaard meh

Polaroid mustache truffaut hammock hella before they sold out semiotics. Fanny pack listicle skateboard ramps master tumblr pitchfork. Kogi selfies blog carry artisan freegan street. Vhs microdosing raw denim seitan ...

<!-- Search Result  -->
<div class="vi-search-result">
  <div class="vi-search-result__content">
    <a class="vi-search-result__trigger" href="#search-result-7a62cb">
      <!-- Use h1-h6 depending page hierarchy -->
      <h3 class="vi-search-result__title">Loko mustache letterpress williamsburg knausgaard meh</h3>
      <div class="vi-search-result__breadcrumb">
        <div class="vi-breadcrumb">
          <ol class="vi-breadcrumb__list">
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">home</span>
            </li>
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">page</span>
            </li>
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">parent</span>
            </li>
          </ol>
        </div>
      </div>
    </a>
    <div class="vi-search-result__snippet  vi-typesystem vi-typesystem--collapse-last">
      Polaroid mustache truffaut hammock hella before they sold out semiotics. <strong>Fanny</strong> pack listicle skateboard ramps master tumblr pitchfork. Kogi selfies blog carry artisan freegan street. Vhs microdosing raw denim seitan ... 
    </div>
  </div>
</div>

Freeze color #

When visited color is not needed, use modifier --freeze-color on .vi-search-result__title.

Pinterest meditation pug fingerstache paleo

Retro disrupt offal tousled keytar. Muggle magic chambray art party banjo kitsch fashion axe kale chips. ... Five dollar toast pabst celiac microdosing pop-up lo-fi. Vice flexitarian narwhal everyday distillery pop-up ...

<!-- Search Result  -->
<div class="vi-search-result">
  <div class="vi-search-result__content">
    <a class="vi-search-result__trigger" href="#search-result-3a1dbb">
      <!-- Use h1-h6 depending page hierarchy -->
      <h3 class="vi-search-result__title vi-search-result__title--freeze-color">Pinterest meditation pug fingerstache paleo</h3>
      <div class="vi-search-result__breadcrumb">
        <div class="vi-breadcrumb">
          <ol class="vi-breadcrumb__list">
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">home</span>
            </li>
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">page</span>
            </li>
            <li class="vi-breadcrumb__item">
              <span class="vi-breadcrumb__segment">parent</span>
            </li>
          </ol>
        </div>
      </div>
    </a>
    <div class="vi-search-result__snippet  vi-typesystem vi-typesystem--collapse-last">
      Retro disrupt offal tousled keytar. Muggle magic <strong>chambray</strong> art party banjo kitsch fashion axe kale chips. ... 
      Five dollar toast pabst celiac microdosing pop-up lo-fi. Vice flexitarian <strong>narwhal</strong> everyday distillery pop-up ... 
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  PBS support
  Initial draft