Components menu
Table of contents
The table of contents is a small section at the beginning of some text that outlines the sections so the reader can jump ahead.
The table of contents serves two purposes:
- it gives users an overview of the content
- it allows readers to go directly to a specific section on the page or within a document
Table of contents
Select a section to jump to:
<div class="d-none d-lg-block">
<div class="contents--table-list card">
<div class="contents--table-list-heading">Table of contents</div>
<div class="contents--table-list-subheading">Select a section to jump to:</div>
<ul>
<li>
<a href="#anchor-headingNameOne" aria-label="Link to this section: Heading Name One">Heading Name One</a>
</li>
<li>
<a href="#anchor-headingNameTwo" aria-label="Link to this section: Heading Name Two">Heading Name Two</a>
</li>
<li>
<a href="#anchor-headingNameThree" aria-label="Link to this section: Heading Name Three">Heading Name Three</a>
</li>
<li>
<a href="#anchor-headingNameFour" aria-label="Link to this section: Heading Name Four">Heading Name Four</a>
</li>
</ul>
</div>
</div> <!-- // Desktop view -->
<div class="d-lg-none">
<div class="side--navigation-collapse-card col-12">
<a class="card-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-tableofcontents" aria-expanded="false" aria-controls="collapse-tableofcontents" role="button"> Table of contents <i class="card-link-icon fa-solid fa-circle-chevron-down" aria-hidden="true"></i> </a>
<div class="side--navigation-collapse-card-open collapse col-12 float-start" id="collapse-tableofcontents">
<div class="contents--table-list-mobile">
<div class="contents--table-list-subheading">Select a section to jump to:</div>
<ul>
<li>
<a href="#anchor-headingNameOne" aria-label="Link to this section: Heading Name One">Heading Name One</a>
</li>
<li>
<a href="#anchor-headingNameTwo" aria-label="Link to this section: Heading Name Two">Heading Name Two</a>
</li>
<li>
<a href="#anchor-headingNameThree" aria-label="Link to this section: Heading Name Three">Heading Name Three</a>
</li>
<li>
<a href="#anchor-headingNameFour" aria-label="Link to this section: Heading Name Four">Heading Name Four</a>
</li>
</ul>
</div>
</div>
</div>
</div> <!-- // Mobile view - Collapse component -->
/* Table of contents
------------------------------------ */
.contents--table, .contents--table-list {
background: #ffffff;
border-top: 8px solid var(--verdant-green);
}
@media (min-width: 320px) {
.contents--table, .contents--table-list {
padding: 10px;
}
}
@media (min-width: 992px) {
.contents--table, .contents--table-list {
padding: 30px 30px 10px;
}
}
.contents--table-list-heading {
font-size: 1.5rem;
font-weight: 500;
}
.contents--table-list-subheading {
margin-bottom: 0.5rem;
padding-bottom: 5px;
border-bottom: 1px solid var(--grey-three);
}
.contents--table ul, .contents--table-list ul {
margin: 20px 30px 0px 30px;
padding: 0 0 10px 0;
}
.contents--table ul li {
display: inline;
list-style: none;
}
@media (min-width: 992px){
.contents--table ul li a.badge.text-bg-primary {
margin: 0px 10px 10px 10px;
float: left;
}
}