0.46.0
Changelog
Components

Link List

Link lists are used when you have a list that you want to highlight within the content, within a multi column layout.

Link lists are comprised of an optional title, an unordered list <ul> or an ordered list <ol>.

Rules for use

  • A link list may contain list items which are either linked or not linked.
  • Link lists may contain either <ul> and <ol> elements, but never both within a single link list component instance.
  • If one column has a title, then all columns need a title.
  • The title can be h2-h6 - depending on where it sits within the page content; users should be able to select what heading type is used for all link list titles.

Link lists can be displayed in either one, two, three or four column layout, as seen in the demo below. The single column layout does not require a modifier class.

The demonstration below does show a mix of list types, but this is only a demo and is not permitted.

#Section Title

#Section Title

  1. #Link Item 4
  2. #Link Item 5
  3. #Link Item 6

#Section Title

#Section Title

  1. #Link Item 10
  2. #Link Item 11
  3. #Link Item 12
.has-two-col
Two column link list layout

#Section Title

#Section Title

  1. #Link Item 4
  2. #Link Item 5
  3. #Link Item 6

#Section Title

#Section Title

  1. #Link Item 10
  2. #Link Item 11
  3. #Link Item 12
.has-three-col
Three column link list layout

#Section Title

#Section Title

  1. #Link Item 4
  2. #Link Item 5
  3. #Link Item 6

#Section Title

#Section Title

  1. #Link Item 10
  2. #Link Item 11
  3. #Link Item 12
.has-four-col
Four column link list layout

#Section Title

#Section Title

  1. #Link Item 4
  2. #Link Item 5
  3. #Link Item 6

#Section Title

#Section Title

  1. #Link Item 10
  2. #Link Item 11
  3. #Link Item 12
<div class="c-link-list c-link-list-grid [modifier class]">
  <div class="c-link-list-grid__sub-col c-link-list-grid__col--first">
    <h2 class="c-link-list__title">#Section Title</h2>
    <ul>
      <li><a href="#0">#Link Item 1</a></li>
      <li>#Link Item 2</li>
      <li><a href="#0">#Link Item 3</a></li>
    </ul>
  </div>
  <div class="c-link-list-grid__sub-col c-link-list-grid__col--second">
    <h2 class="c-link-list__title">#Section Title</h2>
    <ol>
      <li><a href="#0">#Link Item 4</a></li>
      <li><a href="#0">#Link Item 5</a></li>
      <li>#Link Item 6</li>
    </ol>
  </div>
  <div class="c-link-list-grid__sub-col c-link-list-grid__col--third">
    <h2 class="c-link-list__title">#Section Title</h2>
    <ul>
      <li>#Link Item 7</li>
      <li><a href="#0">#Link Item 8</a></li>
      <li><a href="#0">#Link Item 9</a></li>
    </ul>
  </div>
  <div class="c-link-list-grid__sub-col c-link-list-grid__col--fourth">
    <h2 class="c-link-list__title">#Section Title</h2>
    <ol>
      <li><a href="#0">#Link Item 10</a></li>
      <li>#Link Item 11</li>
      <li><a href="#0">#Link Item 12</a></li>
    </ol>
  </div>
</div>

© The University of Adelaide