Promos
A Promo is a snippet of content which links to a full piece of content elsewhere on the BBC site or app.
Documented here: https://www.bbc.co.uk/gel/guidelines/promos
These are examples of Promos we've observed in the wild.
Seen here: https://www.bbc.co.uk/bbcthree#best-of-grid-header
<div>
<h2>Editor's Picks</h2>
<ul>
<li>
<a>
<img>
<h3>'Playing rugby helped me accept being gay'</h3>
</a>
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>NB no alt attribute found on img element
Seen here: https://www.bbc.co.uk/academy
<section>
<h2>
<div>
<div>
<a>
<figure>
<img alt="">
</figure>
<h3>
<p>
</a>
<span>
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</section>Seen here: https://www.bbc.co.uk/iplayer/categories/science-and-nature/featured
<div>
<h2>
<ul>
<li>
<a aria-label="The Ghan: Australia's Greatest Train Journey. Description: Documentary. All aboard for slow TV. Take a visually stunning ride through the outback on Australia's most iconic train. Duration: 180 mins. Available for 28 days.">
<picture>
<img alt="">
</picture>
<div>
Documentary
</div>
<div>
The Ghan: Australia's Greatest Train Journey
</div>
<div class="content-item__info__primary">
All aboard for slow TV
</div>
<div class="content-item__info__secondary">
Take a visually stunning ride through the outback on Australia's most iconic train.
</div>
<div>
<span>180 mins</span> <span>Available for 28 days</span>
</div>
</a>
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>NB iplayer visually provide a primary and secondary view of the promo, based on a rollover interaction
Seen here: https://www.bbc.com/bitesize
<div>
<h2>Space week</h2>
<div>
<div>
<a>
<img alt="The super-hard Solar System quiz">
<h2>The super-hard Solar System quiz</h2>
<p>...</p>
<h5>TOPICAL</h5>
</a>
</div>
<div>
...
</div>
</div>
</div>NB text of alt attribute duplicates text found in sibling h2 element
Seen here: http://www.bbc.com/persian
<div>
<h2>
<div>
<div>
<img alt="اربعین">
</div>
<div>
<a>
<h3>اربعین؛ هزینه های سیاسی و اجتماعی</h3>
</a>
<p>
...
</p>
<div>
<ul>
<li>...</li>
</ul>
</div>
</div>
</div>
<div>
...
</div>
<div>
...
</div>
</div>NB the anchor element is only wrapping the H3 in the source code, but CSS is used to position it over the entire parent DIV as a click target in the browser
Seen here: https://www.bbc.co.uk/news
<div>
<h2>Gatwick Airport shutdown</h2>
<div>
<div class="gs-c-promo-image">
<img src="_104617027_mediaitem104617026.jpg" alt="Drone">
</div>
<div class="gs-c-promo-body">
<a href="/news/technology-46632892">
<h3>How can a drone cause so much chaos?</h3>
</a>
</div>
</div>
<div>
...
</div>
<div>
...
</div>
</div>NB the anchor element is only wrapping the H3 in the source code, but CSS is used to position it over the entire parent DIV as a click target in the browser
Seen here: https://www.bbc.co.uk/weather
<div>
<h2>Features</h2>
<div class="gs-c-promo">
<div class="gs-c-promo-image">
<img src="_104901859_ukweatherwatchers18.jpg" alt="Weather for the Week Ahead">
</div>
<div class="gs-c-promo-body">
<a class="gs-c-promo-heading" href="/weather/features/46642152">
<h3>Weather for the Week Ahead</h3>
</a>
<p class="gs-c-promo-summary">
Rain for some over the next few days. But what does the weather have in store for Christmas Day? Chris Fawkes has the festive forecast.
</p>
</div>
</div>
<div class="gs-c-promo">
...
</div>
<div class="gs-c-promo">
...
</div>
</div>NB the anchor element is only wrapping the H3 in the source code, but CSS is used to position it over the entire parent DIV as a click target in the browser