components

Card

Card-Style using various options for customizing their backgrounds, borders, and text color.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 

    <div class="lp__card lp__card_background_title_text">
<div class="lp__card_wrapper lp__card_inverse_color_type bg-gray-21">
    <div class="lp__card_content">
        <h6 class="lp__card_title"><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  </a></h6>
        <p class="lp__card_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.  </p>
    </div>
</div>
</div>

Card Statistic BG Color
  • Agriculture

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    What We Do 
    <div class="lp__card lp__card_statistics_bg bg-gray-21 blue-63">
    <div class="lp__card_content">
        <div class="lp__card_stat_top_content">
            <div class="lp__stat_icon" title="agriculture"><i class="loop loop-agriculture-1" aria-hidden="true"></i></div>
            <div class="lp__card_title">Agriculture</div>
        </div>
    <div class="lp__card_stat_bottom_content">
            <p class="lp__card_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
            <div class="lp__card_list_item"><a href="#" title="link">What We Do</a></div>
        </div>
    </div>
</div>
    Color variation

    Using various options for customizing in text color add .orange-64 .green-69 .blue-63 class.

    Agriculture

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    What We Do
    Agriculture

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    What We Do
    Payment Systems & Remittances

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

    What We Do
  • image
    Use:

    To communicate a relevant statistic pertaining to the content of a page, generally highlighting a positive growth patterns in a particular Topic, Region, or Country.


    Don’t Use:

    As a navigational tool. Stat cards are primarily meant to communicate a piece of data. A link must be provided to give access to a publication that validates the data, but the data point itself is the primary focus.


    Visual Style:

    The Statistics card component is made up of four primary elements: Title, Topic Icon, Description, and Source Link.

    1. Title: Generally contain a datapoint that needs to be highlighted.

    2. Topic Icon: Meant to visually reinforce the theme of the data being presented. Not all data themes have an appropriate corresponding icon. In these cases the icon should be left out.

    3. Description: Should contain a brief overview of the statistic being presented.

    4. Source Link: Should lead to the publication from which the statistic is cited.

    Behavior:

    If a page has multiple important data points to display, a stats card can be configured to cycle different statistics on page load.


    Editorial:

    The content of a Stats Card needs to be accurate and impactful as a standalone datapoint. The text should be meaningful at a glance without requiring the user to reference the source material to appreciate the context.

  • Climate Change Overview:

    In this example the statistics card highlights a data point relevant to the work pertaining to the topic.

Card Statistic
  • $45.9B
    Financial Assistance
    The Bank loans and grants money…
    <div class="lp__card lp__card_statistics">
    <div class="lp__card_content">
        <div class="lp__card_stat_number">$45.9B</div>
        <div class="lp__card_stat_title">Financial Assistance</div>
        <h6>The Bank loans and grants money…</h6>
        <div class="lp__card_list_horizontal">
            <ul class="lp__card_list">
                <li class="lp__card_list_item"><a href="">Overview</a></li>
                <li class="lp__card_list_item"><a href="">Data</a></li>
                <li class="lp__card_list_item"><a href="">Research &amp; Publications</a></li>
            </ul>
        </div>
    </div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE

Card Twitter

  • In #Morocco, a solar energy complex is expected to achieve 500 MW+ of installed capacity and provide power to more… https://t.co/Efmu1Wc3Im

    <div class="lp__card lp__card_twitter">
    <div class="lp__card_twitter_header">
        <ul>
            <li><i class="loop loop-twitter" aria-hidden="true"></i></li>
            <li>
                <div class="lp__card_twitter_title">World Bank</div>
                <span class="lp__card_link"><a href="">@WorldBank</a></span>
                <span class="lp__card_link"><a href="">#IBRDatwork</a></span>
            </li>
        </ul>
    </div>
    <div class="lp__card_content">
    <p class="lp__card_twitter_description">In <a href="">#Morocco</a>, a solar energy complex is expected to achieve 500 MW+ of installed capacity and provide power to more… <a href="">https://t.co/Efmu1Wc3Im</a></p>
</div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE

Card Focus Area
  • image
    Agriculture and Food
    Go back to main topic
     
    <div class="lp__card lp__card_img_link">
    <div class="lp__card_img">
        <a href="http://www.worldbank.org/en/topic/agriculture">
        <img src="/assets/img/780x439.png" class="lp__img_responsive" title="image" alt="image" />
        <span class="img-gradient"></span>
        <div class="lp__card_img_title">Agriculture and Food</div>
    </a>
    </div>
    <div class="lp__card_link">
        <a href="http://www.worldbank.org/en/topic/agriculture">
            <h6>Go back to main topic</h6>
            <i class="loop loop-angle-right" aria-hidden="true"></i>
        </a>
    </div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE

Card Overview
  • Africa At-A-Glance

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

    Overview 
    <div class="lp__card lp__card_overview">
    <div class="lp__card_header_main_footer">
    <div class="lp__card_content">
        <div class="lp__card_header">
            <h5>Africa At-A-Glance</h5>
        </div>
        <div class="lp__card_main">
            <p class="lp__blurb_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p>
        </div>
    </div>
    <div class="lp__card_footer">
        <a href="#" class="lp__card_link">Overview</a>
    </div>
</div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE

Card Data
  • Data
    Data 
    <div class="lp__card lp__card_data">
    <div class="lp__card_header_main_footer">
    <div class="lp__card_content">
        <div class="lp__card_header">
            <h5>Data</h5>
        </div>
        <div class="lp__card_main">
            <div class="lp__embed_responsive lp__embed_responsive_16by9">
                    <div class="embed-data"><iframe src="http://data.worldbank.org/share/widget?locations=ZG&amp;indicators=NY.GNP.PCAP.CD" width="450" height="300" frameborder="0" scrolling="no"></iframe></div>
                </div>
        </div>
    </div>
    <div class="lp__card_footer">
        <a href="#" class="lp__card_link">Data</a>
    </div>
</div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE

Card Project
  • Project
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    View all Project 
    <div class="lp__card lp__card_project">
    <div class="lp__card_header_main_footer">
    <div class="lp__card_content">
        <div class="lp__card_header">
            <h5>Project</h5>
        </div>
        <div class="lp__card_main">
            <a href=""><img src="/assets/img/439x439-1.jpg" class="project-img"></a>
            <h6><a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a> </h6>
            <p class="lp__blurb_text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
        </div>
    </div>
    <div class="lp__card_footer">
        <a href="#" class="lp__card_link">View all Project</a>
    </div>
</div>
</div>
  • DESIGNER GUIDELINES
  • EXAMPLE