components

Latest List

Latest List highlights new content such as news, blogs, events and research. 
  • <div class="lp__latest_list_section">
    <ul class="lp__latest_item_info">
        <li class="lp__latest_item_list">
            <div class="lp__latest_hammer"><span>Hans Lofgren</span><span>March 24, 2016</span></div>
            <div class="lp__latest_title"><a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></div>
        </li>
        <li class="lp__latest_item_list">
            <div class="lp__latest_hammer"><span>Hans Lofgren</span><span>March 18, 2016</span></div>
            <div class="lp__latest_title"><a href="">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </a></div>
        </li>
        <li class="lp__latest_item_list">
            <div class="lp__latest_hammer"><span>Hans Lofgren</span><span>March 12, 2016</span></div>
            <div class="lp__latest_title"><a href="">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </a></div>
        </li>
    </ul>
</div>
  • Use:

    To highlight new content such as news, blogs, events and research.


    Don't use:

    As a static listing of content links. The latest list should dynamically update to display new content.


    Visual Style:

    Latest Lists items are made up of three elements. A Hammer, a Date, and the Title link. The Hammer and Date are placed above the Title link, and are separated by a vertical line. The Hammer is most often used to indicate the content type (e.g. feature story, press release). In cases where the content type is all the same and type is indicated in a header, the hammer can display the name of the author. This is common when listing recent blog posts. In cases where the component is displaying upcoming events the Hammer is left blank. The Date displays the date of publication when listing publications, and the date of the event when listing upcoming events. The Title link should contain the title of the publication or event, and should link to the associated details page.


    Behavior:

    On hover, Title links should become underlined.

  • World Bank in Africa: