Link hub

Show a list of links with optional descriptions

Overview #

Use the link hub component to show a list of links with optional descriptions.

Link hubs are often used on website home pages, section index pages, and landing pages to guide the user toward resources related to a single topic.

Examples #

The examples on this page are best viewed in a new window.

Choose an example

Open in new window Copy link to example

<ul class="rvt-link-hub">
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Admission standards</span>
      <span class="rvt-link-hub__description">See coursework requirements, test score expectations, and other standards for admission to each IU campus.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Apply to Indiana University</span>
      <span class="rvt-link-hub__description">Get a step-by-step process for applying to IU and find campus-specific deadlines and resources.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Transfer to IU</span>
      <span class="rvt-link-hub__description">Learn what additional steps you need to take as a transfer applicant.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">After you’re admitted</span>
      <span class="rvt-link-hub__description">Learn what comes next when you get your acceptance letter from any of IU’s campuses.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Visit a campus</span>
      <span class="rvt-link-hub__description">Find out how to see IU campuses for yourself with a virtual or in-person visit.</span>
    </a>
  </li>
</ul>

Open in new window Copy link to example

<ul class="rvt-link-hub rvt-link-hub--stacked">
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Admission standards</span>
      <span class="rvt-link-hub__description">See coursework requirements, test score expectations, and other standards for admission to each IU campus.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Apply to Indiana University</span>
      <span class="rvt-link-hub__description">Get a step-by-step process for applying to IU and find campus-specific deadlines and resources.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Transfer to IU</span>
      <span class="rvt-link-hub__description">Learn what additional steps you need to take as a transfer applicant.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">After you’re admitted</span>
      <span class="rvt-link-hub__description">Learn what comes next when you get your acceptance letter from any of IU’s campuses.</span>
    </a>
  </li>
  <li class="rvt-link-hub__item">
    <a class="rvt-link-hub__link" href="#">
      <span class="rvt-link-hub__text">Visit a campus</span>
      <span class="rvt-link-hub__description">Find out how to see IU campuses for yourself with a virtual or in-person visit.</span>
    </a>
  </li>
</ul>

Usage #

Descriptions are optional. You can omit the elements with the .rvt-link-hub__description classes if you don’t need them.

Do

Use to present a list of links related to a single topic
Use to guide users toward potential next steps in a process
Provide descriptions to add helpful context to linked resources
Keep link and description text brief

Don't

Provide a description for only some of the links in the hub—either all links should have descriptions or none should
Use with fewer than three links—use a grid of cards instead
Use as section navigation—use a subnav instead
Use to link to a previous or next piece of content—use a series nav instead