Skip to main content
Design System

A-Z Directory of Things

Overview

This pattern helps organize a large section of logically-ordered, logically-grouped content into a directory-like list with jump links to each heading.

We use a Flex List object to lay out the On-Light Secondary Button jump links and a Three-Up Multicol object to flow the link lists (or other grouped content) across three columns.

Styling note: There should be a "spacious" gap between the A to Z list and the Multicol container. You can achieve this by placing the A-Z list in the .t-section__intro of a .t-section.t-section--gap-spacious or by wrapping it in a div.u-space-block-end-spacious, if the former is not possible/ideal.

A to Z List

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

Back to top

Code

<h1>A to Z List</h1>
<ul class="o-flex-list o-flex-list--justify-start">
  <li><a class="c-button c-button--secondary c-button--on-light" href="#a"><span class="u-font-weight-bold">A</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#b"><span class="u-font-weight-bold">B</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#c"><span class="u-font-weight-bold">C</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#d"><span class="u-font-weight-bold">D</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#e"><span class="u-font-weight-bold">E</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#f"><span class="u-font-weight-bold">F</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#g"><span class="u-font-weight-bold">G</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#h"><span class="u-font-weight-bold">H</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#i"><span class="u-font-weight-bold">I</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#j"><span class="u-font-weight-bold">J</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#k"><span class="u-font-weight-bold">K</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#l"><span class="u-font-weight-bold">L</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#m"><span class="u-font-weight-bold">M</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#n"><span class="u-font-weight-bold">N</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#o"><span class="u-font-weight-bold">O</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#p"><span class="u-font-weight-bold">P</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#q"><span class="u-font-weight-bold">Q</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#r"><span class="u-font-weight-bold">R</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#s"><span class="u-font-weight-bold">S</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#t"><span class="u-font-weight-bold">T</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#u"><span class="u-font-weight-bold">U</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#v"><span class="u-font-weight-bold">V</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#w"><span class="u-font-weight-bold">W</span></a></li>
  <li><a class="c-button c-button--secondary c-button--on-light" href="#y"><span class="u-font-weight-bold">Y</span></a></li>
</ul>

<div class="o-multicol o-multicol--three-up">
  <div class="u-space-block-end-expanded">
      <h2 id="a">A</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>

  <div class="u-space-block-end-expanded">
      <h2 id="b">B</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="c">C</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="d">D</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="e">E</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="f">F</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="g">G</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="h">H</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="i">I</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li> 
        <li><a href="#0">Link</a></li> 
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="j">J</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="k">K</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li> 
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="l">L</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="m">M</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="n">N</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="o">O</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="p">P</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="q">Q</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="r">R</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="s">S</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="t">T</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="u">U</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="v">V</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div class="u-space-block-end-expanded">
      <h2 id="w">W</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
  
  <div>
      <h2 id="y">Y</h2>
      <ul class="o-unstyled-list o-fixed-list o-fixed-list--one-up">
        <li><a href="#0">Link</a></li>
        <li><a href="#0">Link</a></li>
      </ul>
  </div>
</div>
/* line 1, core/src/objects/_flex-list.scss */
.o-flex-list {
  --align-items: center;
  --display: flex;
  --flex-direction: row;
  --flex-wrap: wrap;
  --gap-space: var(--space-tight);
  --justify-content: center;
  --block-space-start: 0;
  --block-space-end: 0;
  --inline-space-start: 0;
  --inline-space-end: 0;
  --inset-space-block-start: 0;
  --inset-space-block-end: 0;
  --inset-space-inline-start: 0;
  --inset-space-inline-end: 0;
  --list-style-type: none;
  list-style-type: var(--list-style-type);
  margin-block: var(--block-space-start) var(--block-space-end);
  margin-inline: var(--inline-space-start) var(--inline-space-end);
  padding-block: var(--inset-space-block-start) var(--inset-space-block-end);
  padding-inline: var(--inset-space-inline-start) var(--inset-space-inline-end);
  align-items: var(--align-items);
  display: var(--display);
  flex-direction: var(--flex-direction);
  flex-wrap: var(--flex-wrap);
  gap: var(--gap-space);
  justify-content: var(--justify-content);
}

/* line 18, core/src/objects/_flex-list.scss */
.o-flex-list > * {
  --display: initial;
  display: var(--display);
  gap: var(--gap-space);
}
									
/* line 107, core/src/objects/_flex-list.scss */
.o-flex-list--justify-start {
  --justify-content: flex-start;
}
									
/* line 1, core/src/objects/_multicol.scss */
.o-multicol {
  --cols: 2 var(--min-col);
  --gap-space: var(--space-comfy);
  columns: var(--cols);
  column-gap: var(--gap-space);
}

/* line 8, core/src/objects/_multicol.scss */
.o-multicol > * {
  --block-space-end: var(--space-comfy);
  --break-inside: avoid;
  break-inside: var(--break-inside);
  margin-block-end: var(--block-space-end);
}
								
/* line 33, core/src/objects/_multicol.scss */
.o-multicol--three-up {
  --cols: 3 var(--min-col);
}

Back to top