Promo Spotlight

Usage

Use to present a single focused topic or programme with supporting editorial photography — combining a clear narrative with a visual. It works well on category landing pages, programme overview pages, or anywhere a section needs more depth and visual weight than a Content Minimal but doesn't warrant a full-bleed hero treatment. The module has two text style variants and a media position prop: ContentStyle=Block — The text column contains an H2 heading, a large copy paragraph (18px), and an optional button group (primary yellow + secondary outlined, configurable via showButtons, primary, and secondary props). The image and text sit side by side in a white rounded card on Desktop. This variant is best used when you want to drive a specific action alongside the content. Contentstyle=List — The text column contains an H2 heading at the top, followed by a structured list of items (each with a bold H5 label and a short regular copy description, separated by hairline dividers). The image sits beside the list. There are no CTA buttons in this variant. This variant is best used when the goal is to communicate a set of named themes, pillars, or features rather than drive a single action. mediaPosition — Controls whether the image appears on the Left or Right of the text column. This prop is set per instance. ⚠️ Alternation rule: When stacking multiple Content Media modules on the same page, always alternate the media position (e.g. Right → Left → Right). Consistent left or right positioning creates a flat, repetitive layout; alternating creates visual rhythm and signals that each block is a distinct topic. On Tablet and Mobile, the image position prop has no effect — the layout always stacks vertically with the list or text first and the image below. The module is available in Desktop, Tablet, and Mobile device variants.