TFL Partners TFL Partners Developers
Widget demo

Hero Banner

A configurable, full-width hero band — background photo with a left scrim, three editable text areas, a primary CTA to your site (data-domain), and Concerts / Sports / Theatre category buttons. The image (a default, your own data-image URL, or any performer) is auto-cropped to data-height, and the yellow accent re-skins with data-primary-color. Drops one data-widget="hero-banner" element.

3
examples
0
data fetches (default)
<script src="https://w.tixcdn.io/loader.js"></script>
01

Default

Out of the box: the default concert image, default copy, and the gold accent. The CTA and category buttons point at data-base-path.

data-base-path
embed
<div data-widget="hero-banner" data-base-path="https://tickets.example.com"></div>
02

Sports image

The image populated from a performer/team (data-performer), with the three text areas rewritten for sports.

data-performerdata-title
embed
<div data-widget="hero-banner" data-base-path="https://tickets.example.com"
     data-performer="Kansas City Royals"
     data-eyebrow="Game day is calling"
     data-title="Every game," data-title-accent="every rivalry."
     data-description="Season tickets, single games and playoff seats…"></div>
03

Performer · light blue

A performer image with the accent recolored via data-primary-color — the same customization the Performer Banner drop-ins use.

data-performerdata-primary-color="#7dd3fc"
embed
<div data-widget="hero-banner" data-base-path="https://tickets.example.com"
     data-performer="Zach Bryan" data-primary-color="#7dd3fc"
     data-eyebrow="On tour now"
     data-title="Get closer to" data-title-accent="the music."
     data-description="Front-row seats, GA pits and the whole tour…"></div>