A promo is a snippet of content which links to a full piece of content elsewhere on LEEDS.GOV.UK or external websites.
The default width of a promo is 100%.
To set the width of a promo, add a class to mega-promo__item. For example, adding the class half will set the width to 50%.
| Class | Width |
|---|---|
| featured | 100% |
| two-thirds | 66.66% |
| half | 50% |
| third | 33.33% |
| quarter | 25% |
<div class="mega-promo">
<div class="mega-promo__item featured">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is the title for a featured promo </h3>
<p class="mega-promo__secondary">This is the description for the promo. You need to add a class of <code>featured</code> to make it full width. </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
<div class="mega-promo__item half">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is a half promo </h3>
<p class="mega-promo__secondary">This is the description for the promo </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
<div class="mega-promo__item quarter">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is a quarter promo </h3>
<p class="mega-promo__secondary">This is the description for the promo </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
<div class="mega-promo__item quarter">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is a quarter promo </h3>
<p class="mega-promo__secondary">This is the description for the promo </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
<div class="mega-promo__item two-thirds">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is a two-thirds promo </h3>
<p class="mega-promo__secondary">This is the description for the promo </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
<div class="mega-promo__item third">
<a href="#">
<div class="mega-promo__img-wrapper">
<div class="mega-promo__img" style="background-image: url(/public/images/placeholder-image-16-9.svg)"> </div>
</div>
<div class="mega-promo__content">
<h3 class="mega-promo__header">This is a third promo </h3>
<p class="mega-promo__secondary">This is the description for the promo </p>
</div>
<span class="mega-promo__highlight">Highlight text </span>
</a>
</div>
</div>Work in progress
Work in progress