Skip to main content
Rivet Design System Indiana University

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.


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>

Elements #

Element Description Usage Required Multiple
Link Link hub item Minimum 3 items. Aim for no more than ten items.

Link is required

Component may contain multiple Link
Link title Name of page being linked to Limit to a short phrase. Don't end the phrase with punctuation.

Link title is required

Component may contain only one Link title
Link description Description of the linked page that appears below the link title Limit to a short sentence. If one link in the hub has a description, each link in the hub should have a description.

Link description is optional

Component may contain only one Link description

Usage #

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

Don't

  • 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