Skip to main content

Quick Links

Version: 0.9.0
Edit

The quick links component is a stylized stack of highlighted links with interactive icons. They are used within the content of a page to help the user quickly scan and jump to a popular topic, external site, or document. This component is primarily used on the homepage of a website and supplements the site navigation.

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/quick-links.scss#L9

<!-- quick links -->
<ul class="c-quick-links">
  <li><a class="c-quick-links__link" href="#">Deans List</a></li>
  <li><a class="c-quick-links__link" href="#">Educator Licensure</a></li>
  <li><a class="c-quick-links__link" href="#">Enrollment Verification</a></li>
  <li><a class="c-quick-links__link" href="#">FERPA</a></li>
  <li><a class="c-quick-links__link" href="#">Graduation Application</a></li>
  <li><a class="c-quick-links__link" href="#">Update Personal Information</a></li>
  <li><a class="c-quick-links__link c-quick-links__link--external" href="#">Faculty &amp; Staff Resources</a></li>
</ul>

Light Variant

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/quick-links.scss#L93

<!-- quick links light -->
<ul class="c-quick-links c-quick-links--light">
  <li><a class="c-quick-links__link" href="#">Deans List</a></li>
  <li><a class="c-quick-links__link" href="#">Educator Licensure</a></li>
  <li><a class="c-quick-links__link" href="#">Enrollment Verification</a></li>
  <li><a class="c-quick-links__link" href="#">FERPA</a></li>
  <li><a class="c-quick-links__link" href="#">Graduation Application</a></li>
  <li><a class="c-quick-links__link" href="#">Update Personal Information</a></li>
  <li><a class="c-quick-links__link c-quick-links__link--external" href="#">Faculty &amp; Staff Resources</a></li>
</ul>