UCLA Web Components

Links: Default 

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

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

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

<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>
 
{{ render '@links--inline' }}

{{ render '@links--links-in-list' }}

{{ render '@links--related-links' }}

{{ render '@links--resource-links' }}
 
/* No context defined. */

No notes defined.