Experts
-
Chief Economist, Middle East and North AfricaIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<div class="lp__experts_section"> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="image" title="image" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <span class="lp__experts_subtitle">Chief Economist, Middle East and North Africa</span> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div> -
Use:
When highlighting experts pertaining to the topic of a page.
Don't use:
For an extended listing of experts. No more than three of the most relevant experts on a topic should be included in an Experts component. If there are more experts to be mentioned, either link to the WB experts listing page or create a separate experts listing page.
Visual Style:
Experts components have four primary elements, the Image, Name, Title, and Description. Every expert requires both an Image and a Name. The Title and Description are optional, but it is suggested that at least a title be included to provide context.
Behavior:
Both the name or the image of an expert should link to a profile page which provides further details about the expert.
Responsiveness
When viewed on a mobile device, a horizontally aligned will change to vertical alignment to maximize available space.
- World Bank in Africa:
In this example the experts are in horizantal listing orientation and an option is added to access a listing of other experts in the field.
Women Business and the Law:In this example the experts are in horizantal listing orientation and an option is added to access a listing of the teamthat works on the project.
Expert Stack
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<div class="lp__experts_stack_section"> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="image" title="image" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="image" title="image" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="image" title="image" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div>
Expert Inline
-
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<div class="row"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="lp__experts_inline_section"> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="expert" title="expert" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="lp__experts_inline_section"> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="expert" title="expert" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="lp__experts_inline_section"> <div class="lp__experts_wrapper"> <div class="lp__experts_img"> <a href=""><img class="lp__img_responsive" src="../assets/img/expert.jpg" alt="expert" title="expert" /></a> </div> <div class="lp__experts_content"> <div class="lp__experts_title"><a href="">Jann Hinze</a></div> <p class="lp__experts_description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> </div> </div> </div> </div>