1. Components
  2. Lists and collections

Link list

A vertical collection of links.

Default link list orc-c-link-list

A vertical collection of links.

2up link list orc-c-link-list--2up

Lays out the list to be 2 items across.

Bare link list orc-c-link-list--bare

Removes the underlines from the default link list.

Purple link list orc-c-link-list--purple

Changes the text color to purple.

Bold link list orc-c-link-list--bold

Changes the font weight to bold.

  • 

    <ul class="orc-c-link-list ">

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->


</ul>
<!--end orc-c-link-list-->
    

  • 

    <ul class="orc-c-link-list orc-c-link-list--2up">

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->


</ul>
<!--end orc-c-link-list-->
    

  • 

    <ul class="orc-c-link-list orc-c-link-list--bare">

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->


</ul>
<!--end orc-c-link-list-->
    

  • 

    <ul class="orc-c-link-list orc-c-link-list--purple">

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->


</ul>
<!--end orc-c-link-list-->
    

  • 

    <ul class="orc-c-link-list orc-c-link-list--bold">

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->

  <li class="orc-c-link-list__item">

    <a href="#" class="orc-c-link-list__link">


      <div class="orc-c-link-list__body">

        <span class="orc-c-link-list__link-text">Call to Action</span>


      </div>
      <!--end orc-c-link-list__body-->

      <svg class="orc-c-icon orc-c-link-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
</svg>
      <!--end orc-c-icon-->


    </a>
    <!--end orc-c-link-list__link-->


  </li>
  <!--end orc-c-link-list__item-->


</ul>
<!--end orc-c-link-list-->

Usage

When to use

Use to direct users to a range of related pages as follow-ups to the content they’re currently viewing.

When to consider an alternative

Instead of linking out to content, you could reiterate it on the current page and nest it smartly with an accordion.

Class Name Description 
orc-c-link-list
Required

Apply to the link list’s containing HTML element. A ul tag is used for this to denote that it is an unordered list.

 
orc-c-link-list--2up
Modifier

Apply in addition to the orc-c-link-list class to layout the list into 2 list items across.

 
orc-c-link-list--bare
Modifier

Apply in addition to the orc-c-link-list class to remove the underlines from the default link list.

 
orc-c-link-list--purple
Modifier

Apply in addition to the orc-c-link-list class to change the text color to purple.

 
orc-c-link-list--bold
Modifier

Apply in addition to the orc-c-link-list class to change the font weight to bold.

 
orc-c-link-list__item
Required

Apply to li tag to represent the list item of the link list.

 
orc-c-link-list__link
Required

Apply to a tag to represent the actual link of the link list. This class applies most of the styling to the link list. This is set to display: flex to place the optional number, text, and icon side-by-side.

 
orc-c-link-list__label

Apply to span before the link list body to represent an optional number that goes before the text of the link list text.

 
orc-c-link-list__body
Required

Apply to div to act as a container for the link text and link body. Set to display: flex to place the link text and link body side-by-side.

 
orc-c-link-list__link-text
Required

Apply to span to represent the actual text of the link list.

 
orc-c-link-list__link-icon

Apply to svg used as an icon before the optional link description.

 
orc-c-link-list__link-description

Apply to span to represent a short description of each link list item.

 
orc-c-icon

Icon’s base class to normalize styles from other icons used on the site.

 
orc-c-link-list__icon

Added to orc-c-icon to change the base styles of the icon only for the link list.

 
orc-c-divider

Apply to div that contains string of text that can be used to separate link list items.

 
orc-c-divider__text

Actual string of text that can be used to separate link list items. For example, a word like “or” can be used to separate items.