Result

What it is

A text row for site search, lighter than a card. ol.hs-results holds the rows; a hairline ends each row, and the results bar above draws the top line. Each row has a type label, a Didot title link, the page path and a snippet.

When to use

• The site search results page: scholarships, benefits, articles and pages in one ranked list.
• Any ranked list of mixed page types where an image or a value would not add a fact.

When not to use

• One type of item with a key figure (an amount, a discount): use a catalog Card in a grid.
• People: use the Member card row list.
• Two to six related routes: use the Link list.

Rules

• Markup: ol.hs-results > li.hs-result > p.hs-result__type, h2.hs-result__title > a, p.hs-result__path, p.hs-result__text.
• The title is h2 when the list sits directly under the page H1, as on the search page. Under a band h2 it is h3.
• The type label is one word from a fixed set: "Scholarship", "Benefit", "Article", "Page", "University". A Status may follow it in the same line.
• The title link is the row's only link. The path is the site-relative URL as text, not a link.
• The snippet is plain text with the matched words in strong. Escape everything else. No author names, no dates in the snippet.
• Use ol: the order is the ranking.

Accessibility

• The title is a heading, so a screen reader can jump result to result.
• The type label is text, not colour.
• Type slate 6.2:1, title navy 12.4:1, path and text slate 6.2:1, match ink 13.0:1 on white.
• The title link has 4px padding above and below; the hover underline change has a 200ms transition that reduced motion removes.

Variants

Results list

Three mixed results for “leadership”. Fictional sample.

<ol class="hs-results">
  <li class="hs-result">
    <p class="hs-result__type">Scholarship <span class="hs-status hs-status--open">Open</span></p>
    <h2 class="hs-result__title"><a href="/scholarships/example-leadership-award" data-ph-capture-attribute-cta="result" data-ph-capture-attribute-cta-loc="results">$2,500 Example Leadership Award</a></h2>
    <p class="hs-result__path">/scholarships/example-leadership-award</p>
    <p class="hs-result__text">An award for students who show <strong>leadership</strong> through a service project on their campus.</p>
  </li>
  <li class="hs-result">
    <p class="hs-result__type">Benefit</p>
    <h2 class="hs-result__title"><a href="/benefits/example-learning-co" data-ph-capture-attribute-cta="result" data-ph-capture-attribute-cta-loc="results">Example Learning Co.</a></h2>
    <p class="hs-result__path">/benefits/example-learning-co</p>
    <p class="hs-result__text">20% off online courses in <strong>leadership</strong>, management and public speaking.</p>
  </li>
  <li class="hs-result">
    <p class="hs-result__type">Article</p>
    <h2 class="hs-result__title"><a href="/articles/example-article" data-ph-capture-attribute-cta="result" data-ph-capture-attribute-cta-loc="results">Five habits of student leaders</a></h2>
    <p class="hs-result__path">/articles/example-article</p>
    <p class="hs-result__text">What student <strong>leadership</strong> looks like in a club, a lab and a part-time job.</p>
  </li>
</ol>