Link List

Ready

A Link List organizes a scannable list of links with optional descriptions.

A Link List is often used on a Landing layout page, such as a section index page, to guide the user to resources related to a single topic. Though a description of the link is optional, it provides context to the user if the link title is not clear enough.

Examples#

Default#

Title of List Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title of List Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title of List Item
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<ul class="bux-link-list" role="list">
    <li class="bux-link-list__item">
        <a class="bux-text-link" href="">
            Title of List Item
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>

    <li class="bux-link-list__item">
        <a class="bux-text-link" href="">
            Title of List Item
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>

    <li class="bux-link-list__item">
        <a class="bux-text-link" href="">
            Title of List Item
        </a>
        <div class="bux-link-list__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>
</ul>

<ul class="bux-link-list" role="list">
	{% for item in items %}	
	<li class="bux-link-list__item">
		<a class="bux-text-link" href="{{ item.url }}">
			{{ item.link }}
		</a>
		{% if item.text %}
		<div class="bux-link-list__text">
			{{ item.text }}
		</div>
		{% endif %}
	</li>
	{% endfor %}
</ul>

Usage#

Dos#

Within a Link List, use links related to a single topic.
Add a description to provide context to the link title, if necessary.
Use a Link List for a list of external links, such as resources, or internal links (when the sidebar navigation cannot be used).
Be consistent with using either all external links or all internal links. Doing so will establish a consistent expectation for the user.

Don'ts#

Don't use with fewer than three links; use Text Links or Cards instead.
Avoid using both external links and internal links within the same Link List, as well as using multiple Link Lists that contain external links and internal links within the same webpage. Doing so will cause inconsistent behaviors of Links Lists, and ultimately confuse the user.

Accessibility#

Reference Links to see important notes about how to write Links withing the Link List
Link Lists should not be used to group long sections of content in the link descriptions – where the link text would take on the role of a heading. Keep the link descriptions short. Consider using the Accordion component for organizing longer sections of text or use plain headings and paragraphs.