A promo is a snippet of content which links to a full piece of content elsewhere on the BBC site or app.
The Promo component is used to advertise BBC content. Principally it is a link to that content, but it can include a combination of supporting content to draw the reader's attention, such as media, data, and information about the content's author.
The full range of supporting Promo content is outlined on the GEL Promo page.
A Promo can be made up of different content, giving us the flexibility to communicate the right message. Below is a list of the content properties covered in this document.
|Headline||Text that uniquely describes the target content.|
|Image||An image promoting the target content.|
|Media indication||Information about the media being promoted.|
|Description||A short description of the target content.|
|Metadata||See the Metadata strip component.|
Promos can appear individually or in groups. In either case, they should be marked up inside an
<aside> (complementary landmark). This marks the Promo(s) out as being tangential; they break away from the host page's main content to suggest complementary reading or resources.
<aside aria-labelledby="unique-promo-label"> <span id="unique-promo-label" hidden>Related programmes</span> <!-- promo(s) here --> </aside>
Note the labeling mechanism. Complementary landmarks are discoverable by screen reader users through browsing, or perusing aggregated landmark lists. The label identifies the specific purpose of the landmark. Suitable labels include "Related", "Read more", or "More like this".
In this case, the label is removed from the DOM with
hidden because a visual label has been deemed unnecessary. This does not suppress the labeling mechanism; screen readers still announce "complementary, related programmes" or similar. Where appropriate, you can instead provide a visible label (by removing
hidden). You can also use a heading, if you think it is beneficial for the promos to be considered part of the page's main structure and table of contents.
<aside aria-labelledby="unique-promo-label"> <h2 id="unique-promo-label">Related programmes</h2> <!-- promo(s) here --> </aside>
You must choose a heading level that is appropriate for the context. For example, if the promos can be considered a child subsection of the page, use an
- Main heading (
- Subsection heading (
- Another subsection heading (
- Read more (
<h2>) ← The Promo landmark
- Subsection heading (
Groups of promos
A group of promos should be marked up as a list. This enables structural and navigational cues in screen reader software.
<aside aria-labelledby="unique-promo-label"> <span class="gel-sr" id="unique-promo-label">More like this</span> <ul class="gel-promos"> <li class="gel-promo">...</li> <li class="gel-promo">...</li> <li class="gel-promo">...</li> <li class="gel-promo">...</li> </ul> </aside>
The promo itself
The most important thing to remember about Promo components is they have a single purpose: to promote another part of the BBC's services; a site, news story, television programme etc. Promos are differentiated from Cards in that they only have one piece of functionality: a link to the promoted content. If you intend to include functionality in situ, such as a video player, use a Card instead.
The headline link
The Promo must contain a link as its main label (or 'headline'). The wording of this link should resemble that of the target page's
<h1>. This consistency aids cognitive accessibility and improves SEO.
<div class="gel-promo"> <div class="gel-promo__content"> <a class="gel-promo__headline" href="path/to/content">University Challenge</a> </div> </div>