TFL Partners TFL Partners Developers
Widget demo

Performer Banner

A promotional banner for a single performer, built from the events feed. Five container-query-driven views — a hero with a tour-date list, a full-bleed spotlight, a compact strip, and a tile (with one event or none). Every colour is a --color-banner-* token you can override. Each block drops one or more data-widget="banner" elements.

5
layout variants
4
variants shown
<script src="https://w.tixcdn.io/loader.js"></script>
01

Hero — with tour dates

Up to three upcoming dates, an eyebrow, a blurb, and a presale note.

data-variant="hero"data-events="3"
embed
<div data-widget="banner" data-performer="Harry Styles" data-variant="hero"
     data-events="3" data-eyebrow="Live 2026"
     data-blurb="Eight nights only. The full catalogue, one stage, a live twelve-piece band."
     data-note="Presale ends Aug 14"></div>
02

Spotlight — full-bleed hero

Image-led, the largest name in the set, with a single date detail.

data-variant="spotlight"
embed
<div data-widget="banner" data-performer="Harry Styles"
     data-variant="spotlight" data-eyebrow="One Night Live"></div>
03

Compact strip

A slim in-page promo bar; stacks under 720px. The button label is customizable with data-cta (defaults to "View").

data-variant="strip"data-cta="Get Tickets"
embed
<div data-widget="banner" data-performer="Harry Styles" data-variant="strip"
     data-eyebrow="Live 2026" data-cta="Get Tickets"></div>
04

Tiles — auto-fit grid

Each tile is its own container. With an event it shows the next date; with data-events="0" it's the image-led plain variant.

data-variant="tile"
embed
<div data-widget="banner" data-performer="Harry Styles" data-variant="tile" data-eyebrow="Live 2026"></div>
<!-- repeat for Muse, Olivia Rodrigo -->
05

Container queries — same widget, different widths

The banner responds to its own width, not the viewport. The same hero markup at 380px and 720px.

data-variant="hero"
embed
<div data-widget="banner" data-performer="Harry Styles" data-variant="hero"
     data-events="3" data-eyebrow="Live 2026"></div>
<!-- the same markup reflows to the width of its container -->