Minister or institutional head (multiple with picture) example
Below is working example for when the "Minster or institutional head" component contains three columns of multiple images. The <div class="col-md-4"> element can be repeated as many times as there are ministers.
Secretary(ies) of State
![The Honourable [Official title]](https://dummyimage.com/200x250/000000/FFFFFF.png)
Code sample
<section class="gc-minister">
<h2>Secretary(ies) of State</h2>
<div class="row wb-eqht-grd">
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5 ">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5 ">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
</div>
<div class="row wb-eqht-grd">
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5 ">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5 ">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 col-md-7 pull-right">
<h3><a href="#">The Honourable [Secretary of State name]</a></h3>
</div>
<div class="col-xs-12 col-md-5 ">
<img src="https://dummyimage.com/200x250/000000/FFFFFF.png" alt="The Honourable [Official title]">
</div>
<div class="col-xs-12 col-md-7">
<p>[Official title]</p>
</div>
</div>
</div>
</div>
</section>Page details
- Date modified: