# Result

> One row in a list of search results of mixed types: type label, title link, path and a snippet with the match in bold.

- Block class: `.hs-result`
- CSS: `components/result.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/directories-round.html
- Variants: Results list
- HTML page: https://brand.honorsociety.org/components/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](/components/card/) in a grid.
- People: use the [Member card](/components/member-card/) row list.
- Two to six related routes: use the [Link list](/components/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](/components/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.

```html
<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>
```