back to Card components
Card
Cards include a few options for working with images. Choose overlaying images with card content, or simply embedding the image in a card.
focus Areas Card
-
<div class="lp__card_focus"> <section class="lp__front"> <a href="http://www.worldbank.org/"> <img class="lp__img_responsive" src="/assets/img/hero-focus-1.jpg" alt="topic-focus" title="topic-focus"> <span class="img-gradient"></span> <h5 class="_focus_title">Food Quality and Food Safety</h5> </a> </section> <section class="lp__back"> <a href="http://www.worldbank.org/"> <h5>Food Quality and Food Safety</h5> <p class="lp__blurb_text">Malnutrition and food-borne illnesses impose large current and future human, economic, social and fiscal costs on countries.</p> <div class="arrow_link"><i class="loop loop-angle-right" aria-hidden="true"></i></div> </a> </section> </div> - DESIGNER
- EXAMPLE
Feature Card
-
<div class="lp__card lp__card_img_overlay"> <section class="lp__card_overlay_content"> <div class="lp__hammer">OUR CAMPAIGN</div> <h6 class="lp__text_uppercase"><a href="#">Lorem ipsum dolor sit amet, consectetuer.</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.</p> </section> <img class="lp__img_responsive card_img_cover" src="/assets/img/439x439-2.jpg" alt="image" title="image"> </div> - DESIGNER
- EXAMPLE
focus Areas Card
-
<div class="lp__card lp__card_img_overlay lp__small_card"> <section class="lp__card_overlay_content"> <div class="lp__hammer">OUR CAMPAIGN</div> <h5 class="lp__text_uppercase"><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h5> <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.</p> </section> <img class="lp__img_responsive card_img_cover" src="/assets/img/480-225-2.jpg" alt="image" title="image"> </div> - DESIGNER
- EXAMPLE
focus Areas Card
-
<div class="lp__card lp__card_img_overlay lp__vertical_card"> <section class="lp__card_overlay_content"> <div class="lp__hammer">OUR CAMPAIGN</div> <h5 class="lp__text_uppercase"><a href="#">Lorem ipsum dolor sit amet, consectetuer.</a></h5> <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.</p> </section> <img class="lp__img_responsive card_img_cover" src="/assets/img/480-225.jpg" alt="image" title="image"> </div> - DESIGNER
- EXAMPLE
Card
-
Mihasonirina Andrianaivo May 17, 2017Girls’ Clubs Having ‘Big and Meaninful’ Impacts on Young Women’s Empowerment
Girls’ clubs in Uganda offer a safe haven for young women amid high rates of youth unemployment, teen pregnancy and early marriage. A study finds the clubs are improving young women’s ability to earn an income and delay marriage and childbearing.
<div class="lp__card lp__card_fullwidth"> <div class="row"> <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12"> <img class="lp__img_responsive" src="/assets/img/780x439-7.jpg" alt="image" title="image"> </div><!-- end image --> <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12"> <div class="lp__card_content"> <div class="lp__hammer"> <span>Mihasonirina Andrianaivo</span> <span>May 17, 2017</span> </div> <h4><a href="">Girls’ Clubs Having ‘Big and Meaninful’ Impacts on Young Women’s Empowerment</a></h4> <p class="lp__card_description">Girls’ clubs in Uganda offer a safe haven for young women amid high rates of youth unemployment, teen pregnancy and early marriage. A study finds the clubs are improving young women’s ability to earn an income and delay marriage and childbearing.</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 & Publications</a></li> </ul> </div> </div> </div> </div> </div>
Card
-
Events
The Annual Bank Conference on Africa: The Challenges and Opportunities of Transforming African Agriculture
June 1-2, 2017Kuala Lumpur, Malaysia<div class="lp__card lp__card_fullwidth"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12"> <img class="lp__img_responsive" src="/assets/img/780x439-7.jpg" alt="image" title="image"> </div><!-- end image --> <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-xs-12"> <div class="lp__card_content"> <div class="lp__hammer"> <span>Events</span> </div> <h4><a href="">The Annual Bank Conference on Africa: The Challenges and Opportunities of Transforming African Agriculture</a></h4> <div class="lp__card_date">June 1-2, 2017</div> <div class="lp__card_place">Kuala Lumpur, Malaysia</div> </div> </div> </div> </div>