components

Card

Cards are versatile components to highlight information within a structured container. Use cards as single feature in a side bar, or as a larger horizontal grouping.

Card with photo, hammer, title, blurb text and links
  • image
    Slideshare Oct 15, 2016
    Climate Change

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

    <div class="lp__card lp__card_photo_title_text_links">
<div class="lp__card_wrapper">
    <a href="http://www.worldbank.org/"><img src="../assets/img/780x439-6.jpg" class="lp__img_responsive" title="image" alt="image"></a>
    <div class="lp__card_content">
        <div class="lp__card_hammer"><span>Slideshare</span><span>Oct 15, 2016</span></div>
        <h6 class="lp__card_title"><a href="#">Climate Change</a></h6>
        <p class="lp__card_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
        <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>
</div>
  • image
    Use:

    When highlighting and linking to important content pages. This generally comes in the form of news, publications, press releases, multimedia, upcoming events, etc.


    Don’t Use:

    In large groups. Cards should be used only for highlighting content, not as a listing component. There should never be more than eight cards in a single group.


    Visual Style:

    These card components are made up of five primary elements: Image, Heading, Title, Blurb Text, and Link(s). Not all cards will utilize every element, but every card must have a title.

    1. Image: Card images should follow a 16:9 ratio in landscape orientation. More details are available in the Images section. Card images can be configured to link to a determined destination when clicked. It is suggested that the image link to the same destination as the Title.

    2. Heading: The heading can be configured to display a content type indicator, a publication date, or both.

    3. Title: The Title must be configured to link to a determined destination if the card does not include any links. The title length is limited to 80 characters, or 4 lines. This is a consistent limitation across all widths of this card as to maintain effective responsiveness.

    4. Blurb Text: The Blurb length is limited to 140 characters, or 5 lines. This is a consistent limitation across all widths of this card as to maintain effective responsiveness.

    5. Links: Additional links can be included to provide direct access to files or media directly related to, or in support of the destination page. Links can be presented in either vertical list form or horizontal line separated form. It is suggested that horizontal configuration be used in cases where there will be greater than 3 links present.

    Editorial:

    It is important that the content of a card be short and clear. The Title must be unambiguous and should reflect the title of the destination page(s) or content. A Blurb Should be a brief description of the destination page(s), and should only be used if the Title does not supply enough information.


    Responsiveness:

    Cards are meant to be very flexible; stretching and stacking neatly as the column structure changes between screen sizes.

  • World Bank News:

    In this example each card links to a news item. It would be easy to populate each card with every element available, but instead the only elements employed are an image, a hammer, and a title. This restraint makes the page less overwhelming and more consumable, while still maintaining visual interest.


    The World Bank in Africa:

    The Cards in the research section each link to a research publication. It would be easy to populate each card with every element available, but instead the only elements employed are a hammer, and a title. This offers clarity and access, while keeping that section from raising above it's intended hierarchy on the page.

Card with photo, hammer, title, blurb text and links
  • image
    Oct 15, 2016
    Climate Change

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

    <div class="lp__card lp__card_photo_title_text_links">
<div class="lp__card_wrapper">
    <a href="http://www.worldbank.org/"><img src="../assets/img/780x439-7.jpg" class="lp__img_responsive" title="image" alt="image"></a>
    <div class="lp__card_content">
        <div class="lp__card_hammer"><span>Oct 15, 2016</span></div>
        <h6 class="lp__card_title"><a href="#">Climate Change</a></h6>
        <p class="lp__card_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
        <div class="lp__card_list_vertical">
            <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>
</div>

Card with photo, title, blurb text
  • image
    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_photo_title_text">
<div class="lp__card_wrapper">
    <a href="http://www.worldbank.org/"><img src="../assets/img/780x439-8.jpg" class="lp__img_responsive" title="image" alt="image"></a>
    <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 with top border, hammer and title

Card with top border, title, blurb-text and link
  • Climate Change

    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_title_text_links">
<div class="lp__card_wrapper">
    <div class="lp__card_content">
        <h6 class="lp__card_title"><a href="#">Climate Change</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 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>
                <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>
</div>