components

Link List

Provides the user additional paths to investigate similar content. Also provides site owners the ability to cross promote related products.

Link List
 
  • <div class="">
<ul class="lp__link_list">
    <li class="lp__link_list_item">
        <a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</a>
    </li>
    <li class="lp__link_list_item">
        <a href="">Aenean commodo ligula eget dolor. Aenean massa.</a>
    </li>
    <li class="lp__link_list_item">
        <a href="">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </a>
    </li>
    <li class="lp__link_list_item">
        <a href=""> Curabitur ullamcorper ultricies nisi.</a>
    </li>
    <li class="lp__link_list_item">
        <a href="">Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</a>
    </li>
</ul>
</div>
  • Use:

    To provide users with additional paths to investigate similar content, and to give site owners the ability to cross promote related products or content.


    Don't use:

    As the primary point of navigation for important content. Link lists are meant to point to related or relevant content. Link Lists can link to important content, but they should never be the primary access point for that content.


    Visual Style:

    The Related Link List component allows for a lot of freedom in usage and formatting. There are several optional elements that can be incorporated in a Link List, including a header, links, category, date, and icon. The links and header are the only required elements for a Link List, but including other elements can provide crucial content.


    Editorial:

    Links should effectively communicate to the user where the link will lead them, whether that be the title of the target page or document, or the name of an event.

  • News, Press Release:

    This is an example of a simple link only related content link list component. The simplest version of a link list will generally be the most effective and most usable, so this is the appropriate configuration for most instances of this component.

Link List With hammer and date
 
  • <div class="">
<ul class="lp__link_list">
    <li class="lp__link_list_item">
        <div class="lp__link_smallheading">
            <span class="lp__hammer">World bank</span>
            <span class="lp__time_stamp">NOV 14, 2016</span>
        </div>
        <a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</a>
    </li>
    <li class="lp__link_list_item">
        <div class="lp__link_smallheading">
            <span class="lp__hammer">World bank</span>
            <span class="lp__time_stamp">NOV 14, 2016</span>
        </div>
        <a href="">Aenean commodo ligula eget dolor. Aenean massa.</a>
    </li>
    <li class="lp__link_list_item">
        <div class="lp__link_smallheading">
            <span class="lp__hammer">World bank</span>
            <span class="lp__time_stamp">NOV 14, 2016</span>
        </div>
        <a href="">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </a>
    </li>
    <li class="lp__link_list_item">
        <div class="lp__link_smallheading">
            <span class="lp__hammer">World bank</span>
            <span class="lp__time_stamp">NOV 14, 2016</span>
        </div>
        <a href=""> Curabitur ullamcorper ultricies nisi.</a>
    </li>
    <li class="lp__link_list_item">
        <div class="lp__link_smallheading">
            <span class="lp__hammer">World bank</span>
            <span class="lp__time_stamp">NOV 14, 2016</span>
        </div>
        <a href="">Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</a>
    </li>
</ul>
</div>
  • When using a link list to list related publications, a hammer and date should be used to communicate the publication type, source, or author of the publication, and a publication date.
  • EXAMPLE N/A

Link List With date

Link List With Sub List item

Icon Link List
 
  • <div class="">
<ul class="lp__link_list">
    <li class="lp__link_list_item">
        <i class="loop loop-file-pdf" aria-hidden="true"></i>
        <a href="">Aenean commodo ligula eget dolor. Aenean massa.</a>
        <span>(PDF, 6MB)</span>
    </li>
    <li class="lp__link_list_item">
        <i class="loop loop-file-excel" aria-hidden="true"></i>
        <a href="">IFC mobilizes private sector investment and provides advice</a>
    </li>
    <li class="lp__link_list_item">
        <i class="loop loop-file-pdf" aria-hidden="true"></i>
        <a href="">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</a>
    </li>
    <li class="lp__link_list_item">Key note:
    <div class="lp__link_list_sublist_item">
        <ul>
            <li><i class="loop loop-file-excel" aria-hidden="true"></i><a href="#"> Duis leo</a><span>(PDF, 6MB)</span></li>
            <li><i class="loop loop-file-word" aria-hidden="true"></i><a href="#">Maecenas nec odio et ante tincidunt tempus.</a><span>(PDF, 6MB)</span></li>
            <li><i class="loop loop-file-pdf" aria-hidden="true"></i><a href="#">Nullam quis ante.</a></li>
            <li><i class="loop loop-files" aria-hidden="true"></i><a href="#">Quisque rutrum</a><span>(PDF, 6MB)</span></li>
        </ul>
    </div>
    </li>
    <li class="lp__link_list_item">
        <i class="loop loop-file-word" aria-hidden="true"></i>
        <a href="">Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</a>
    </li>
</ul>
</div>
  • Icons should be used when a link will initiate a document download, even if the document will only load within the browser. Using proper icons will also help users find the type of documents that they are looking for with greater ease.
  • EXAMPLE N/A