components

Stay Connected
  • Stayconnected Inline
    Stay Connected
    Stayconnected Stack
    Stay Connected
    <div class="lp__stayconnected lp__stayconnected_inline">
    <h5 class="lp__stayconnected_title">Stay Connected</h5>
    <ul class="lp__stayconnected_list">
        <li class="lp__stayconnected_list_item">
            <a href="http://www.facebook.com/worldbank"><span class="lp__stayconnected_icon"><i class="loop loop-facebook" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
        <li class="lp__stayconnected_list_item">
            <a href="http://www.twitter.com/worldbank"><span class="lp__stayconnected_icon"><i class="loop loop-twitter" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
        <li class="lp__stayconnected_list_item">
            <a href="http://www.linkedin.com/company/the-world-bank"><span class="lp__stayconnected_icon"><i class="loop loop-linkedin" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
        <li class="lp__stayconnected_list_item">
            <a href="https://instagram.com/worldbank/"><span class="lp__stayconnected_icon"><i class="loop loop-instagram" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
        <li class="lp__stayconnected_list_item">
            <a href="https://www.youtube.com/user/WorldBank"><span class="lp__stayconnected_icon"><i class="loop loop-youtube" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
        <li class="lp__stayconnected_list_item">
            <a href="https://www.flickr.com/photos/worldbank"><span class="lp__stayconnected_icon"><i class="loop loop-flickr" aria-hidden="true"></i></span><span class="icon_lable"></span></a>
        </li>
    </ul>
</div>
  • Use:

    To link users to the social media accounts affiliated with a page or site.


    Don't use:

    To give users a way to share a page on their own social media accounts. This version is meant only for connecting users to affiliated accounts.


    Visual Style:

    The Stay Connected component can be presented in either a vertical, or horizontal configuration. The vertical configuration should be used when the width of the allotted space is four columns or fewer. Otherwise, the horizontal orientation should be used to maximise available space.


    Behavior:

    When an icon is clicked the user will navigate to the corresponding social media account for that page. This can include Facebook, Twitter, LinkedIn, Instagram, Youtube, Flickr, Blogs, Soundcloud, RSS feeds, or a mailing list signup page.


    Editorial:

    When in vertical orientation, social media logo buttons will have the name of the corresponding social media site as a link immediately to the right.

  • Education Topic

    This is an example of the horizontal orientation.


    Education Overview

    This is an example of the vertical orientation.