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.

Bushwick readymade lomo twee asymmetrical

... Yuccie pitchfork lo-fi photo booth fanny pack iphone tote bag austin. Asymmetrical drinking williamsburg ... Butcher selfies williamsburg. Gastropub mixtape farm-to-table forage authentic stumptown. Fashion axe.

<!-- Search Result  -->
<div class="vi-search-result">
  <div class="vi-search-result__content">
    <a class="vi-search-result__trigger" href="#search-result-934d08">
      <!-- Use h1-h6 depending page hierarchy -->
      <h3 class="vi-search-result__title">Bushwick readymade lomo twee asymmetrical</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">
      ...
      Yuccie pitchfork lo-fi photo booth fanny pack iphone <strong>tote</strong> bag austin. Asymmetrical drinking williamsburg ... 
      Butcher selfies williamsburg. Gastropub mixtape farm-to-table forage <strong>authentic</strong> stumptown. Fashion axe.
    </div>
  </div>
</div>

Freeze color #

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

Biodiesel church-key vinegar squid swag semiotics

Keytar chicharrones portland scenester. Aesthetic raw denim twee vice blue bottle fingerstache crucifix. ... Squid trust fund tumblr chicharrones kombucha fanny pack pinterest. Retro paleo photo booth lumbersexual pabst ...

<!-- Search Result  -->
<div class="vi-search-result">
  <div class="vi-search-result__content">
    <a class="vi-search-result__trigger" href="#search-result-6143ee">
      <!-- Use h1-h6 depending page hierarchy -->
      <h3 class="vi-search-result__title vi-search-result__title--freeze-color">Biodiesel church-key vinegar squid swag semiotics</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">
      Keytar chicharrones portland scenester. Aesthetic raw denim twee vice blue <strong>bottle</strong> fingerstache crucifix. ... 
      Squid trust fund tumblr chicharrones kombucha <strong>fanny</strong> pack pinterest. Retro paleo photo booth lumbersexual pabst ... 
    </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