Links

Report an Issue Join the Slack Discussion

Usage

Usability Guidance

Accessibility Requirements

Code

Examples of Use

Default

<h2>Inline</h2>
<div class="ucla">
  <!-- Inline Link (Light Background) -->
  <p>
    This is an example of an <a href="#">inline</a> link on light background.
  </p>

  <!-- Inline Link (Dark Background) -->
  <p style="background: #2774AE; color: white;">
    This is an example of an <a class="white-link" href="#">inline</a> link on dark background.
  </p>

  <br>
</div>


<h2 class="mt-24">Links In List</h2>
<div class="ucla">
  <!-- Links In List -->
  <ul>
    <li>...</li>
    <li>
      <a href="#">Link in List</a>
    </li>
    <li>...</li>
  </ul>
</div>


<h2 class="mt-24">Related Links</h2>
<div class="ucla">
  <!-- Related Links -->
  <ul class="related-links">
    <li><a href="#">This is an Internal Link</a></li>
    <li><a class="related-links--external" href="#">This is an External Link</a></li>
    <li><a class="related-links--download" href="#">This is a Link to a Download (PDF)</a></li>
  </ul>
</div>

<h2 class="mt-24">Resource Links</h2>
<div class="ucla">
    <a class="resource-link" href="#">
        <span class="resource-link__primary">Primary</span>
        <span class="resource-link__secondary">Secondary</span>
    </a>
    <a class="resource-link disabled" href="#">
        <span class="resource-link__primary">Primary (disabled)</span>
        <span class="resource-link__secondary">Secondary (disabled)</span>
    </a>
</div>

Inline

<h2>Inline</h2>
<div class="ucla">
  <!-- Inline Link (Light Background) -->
  <p>
    This is an example of an <a href="#">inline</a> link on light background.
  </p>

  <!-- Inline Link (Dark Background) -->
  <p style="background: #2774AE; color: white;">
    This is an example of an <a class="white-link" href="#">inline</a> link on dark background.
  </p>

  <br>
</div>

Links In List

<h2 class="mt-24">Links In List</h2>
<div class="ucla">
  <!-- Links In List -->
  <ul>
    <li>...</li>
    <li>
      <a href="#">Link in List</a>
    </li>
    <li>...</li>
  </ul>
</div>

Related Links

<h2 class="mt-24">Related Links</h2>
<div class="ucla">
  <!-- Related Links -->
  <ul class="related-links">
    <li><a href="#">This is an Internal Link</a></li>
    <li><a class="related-links--external" href="#">This is an External Link</a></li>
    <li><a class="related-links--download" href="#">This is a Link to a Download (PDF)</a></li>
  </ul>
</div>