Directory

A long index: every equity, every state, every seat. Grouped, scannable, and a real page rather than a dropdown.

Equities

HTML

<div class="p234-directory">
  <h3 class="p234-directory__letter">B</h3>
  <a class="p234-directory__row" href="#">
    <span class="p234-directory__name">BUA Foods</span>
    <span class="p234-directory__detail">Consumer goods</span>
    <span class="p234-directory__value">412.00</span>
  </a>
  <a class="p234-directory__row" href="#">
    <span class="p234-directory__name">BUA Cement</span>
    <span class="p234-directory__detail">Industrial</span>
    <span class="p234-directory__value">98.50</span>
  </a>
  <h3 class="p234-directory__letter">D</h3>
  <a class="p234-directory__row" href="#">
    <span class="p234-directory__name">Dangote Cement</span>
    <span class="p234-directory__detail">Industrial</span>
    <span class="p234-directory__value">505.90</span>
  </a>
  <h3 class="p234-directory__letter">U</h3>
  <a class="p234-directory__row" href="#">
    <span class="p234-directory__name">UBA</span>
    <span class="p234-directory__detail">Banking</span>
    <span class="p234-directory__value">38.50</span>
  </a>
</div>

States, without values

K

Kaduna23 LGAs Kano44 LGAs Katsina34 LGAs

HTML

<div class="p234-directory">
  <h3 class="p234-directory__letter">K</h3>
  <a class="p234-directory__row" href="#"><span class="p234-directory__name">Kaduna</span><span class="p234-directory__detail">23 LGAs</span></a>
  <a class="p234-directory__row" href="#"><span class="p234-directory__name">Kano</span><span class="p234-directory__detail">44 LGAs</span></a>
  <a class="p234-directory__row" href="#"><span class="p234-directory__name">Katsina</span><span class="p234-directory__detail">34 LGAs</span></a>
</div>

A page, not a dropdown

A directory is one of the few page types here that is genuinely useful to both a reader and a crawler. Every row is a real link to a real page, which is how the data pages get discovered at all on a domain Google fetches sparingly. A select element with the same options is invisible to both.

Rules

Group by first letter for names, by state for places, by sector where that is how people look.
Let the group heading stick while its rows scroll past.
Give every row a second line of detail, so the list is scannable rather than a wall of names.
Right-align any figure and keep it tabular.

Do not paginate it. A directory's job is to be complete on one page.
Do not hide it behind a search box only. Search helps people who know the name; the list is for everyone else.

Tokens this component reads

--p234-color-ink--p234-color-ink-muted--p234-color-rule--p234-color-paper--p234-color-paper-alt--p234-type-kicker-*--p234-type-ui-*--p234-type-meta-*--p234-type-data-sm-*--p234-space-3--p234-space-4--p234-border-hairline--p234-border-thick