Skip to main content

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.


<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>
<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