<div class="lp__banner_landing v1">
<div class="lp__banner_fullwidth">
<div class="lp__banner_img">
<img src="../assets/img/fullwidth-1.jpg" class="lp__img_responsive cover_image" alt="image" title="image">
<span class="img-gradient"></span>
</div>
<div class="container banner-container">
<div class="row">
<div class="lp__banner_img_overlay_v1 col-xl-10 col-lg-10 col-md-12 col-sm-12 col-xs-12">
<h1 class="lp__banner_title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
<p class="lp__banner_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. Nulla consequat massa quis enim. </p>
</div>
</div>
</div>
</div>
</div>On pages that benefit from a striking, unique visual identity. This generally includes landing pages like Understanding Poverty, What We Do, Where We Work.
On Country, Region, Topic, News Content pages, or any pages that are consistently employ any other specific Banner style.
Description text for this banner should offer an impactful summary of the content and goals of the page. For reference look at any top-level page in the WB site, the banner image and the description work together to humanize the content of the page by using intimate imagery and almost conversational introductory text (e.g. Understanding Poverty). The description should be kept reasonably brief, generally no longer than two sentences or three lines of text at full screen.
<div class="lp__banner_landing v2">
<div class="lp__banner_fullwidth">
<div class="lp__banner_img">
<img src="../assets/img/fullwidth-2.jpg" class="lp__img_responsive cover_image" alt="image" title="image">
<span class="img-gradient"></span>
</div>
<div class="container banner-container">
<div class="row">
<div class="lp__banner_img_overlay_v2 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
<h3 class="lp__banner_title">consectetuer adipiscing elit.</h3>
<p class="lp__banner_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<div class="lp__btn_group_horizontal">
<a href="#" class="lp__btn lp__btn_sm lp__btn_primary_white">Read More</a>
<a href="#" class="lp__btn lp__btn_sm lp__btn_primary_white">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>On landing pages which require a clear call to action which is high priority on the page.
On Country, Region, Topic, News Content pages, or any pages that are consistently employ any other specific Banner style.
The Buttons on this banner variation must be horizontally aligned. The color and pattern of the banner image should be considered when choosing button color variation so that the buttons have appropriate contrast and are easily visible.
The banner should be completely static with the exception of the button hover states outlined in the Buttons section.
On mobile devices the text and buttons will move from the banner image to a sub-banner with a white background so that the primary subject of the banner is not obscured.
This example employs this banner because it highlights the primary desired point of interaction for the page.
<div class="lp__banner_landing lp__banner_v5">
<div class="lp__banner_fullwidth">
<div class="lp__banner_img">
<img src="../assets/img/fullwidth-3.jpg" class="lp__img_responsive cover_image" alt="image" title="image">
<span class="img-gradient"></span>
</div>
<div class="container banner-container">
<div class="row">
<div class="lp__banner_img_overlay_v1 col-xl-10 col-lg-10 col-md-12 col-sm-12 col-xs-12">
<h1 class="lp__banner_title">consectetuer adipiscing elit.</h1>
<p class="lp__banner_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<div class="lp__btn_group_horizontal">
<a href="#" class="lp__btn lp__btn_sm lp__btn_primary">Read More</a>
<a href="#" class="lp__btn lp__btn_sm lp__btn_secondary_orange">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>Much like Banner v2, on pages that benefit from a striking, unique visual identity. This is primarily used for campaign pages.
On Country, Region, Topic, News Content pages, or any pages that are consistently employ any other specific Banner style.
The Buttons on this banner variation must be horizontally aligned. The color and pattern of the banner image should be considered when choosing button color variation so that the buttons have appropriate contrast and are easily visible.
The banner should be completely static with the exception of the button hover states outlined in the Buttons section.
Description text for this banner should offer an impactful summary of the content and goals of the page. For reference look at any top-level page in the WB site, the banner image and the description work together to humanize the content of the page by using intimate imagery and almost conversational introductory text (e.g. Understanding Poverty). The description should be kept reasonably brief, generally no longer than two sentences or three lines of text at full screen.
On mobile devices the text and buttons will move from the banner image to a sub-banner with a white background so that the primary subject of the banner is not obscured.