Trending — TFL Partners examples

01

Search + Trending

Performer and event autocomplete, seeded with a location and UTM params, fused above a stacked trending grid in one panel.

data-widget="search"data-item-display="stacked"

embed

<div class="trending-search">
  <div data-widget="search" data-country-code="US" data-url-format="external"></div>
  <div class="trending-addon" data-widget="trending" data-country-code="us"
       data-name="general-trending-events" data-item-display="stacked"
       data-columns="6" data-link-target="_blank"></div>
</div>

02

Hero slider

A single full-width slide for a banner-style trending feature.

data-slides-per-view="1"

embed

<div data-widget="trending-slider" data-country-code="us"
     data-name="general-trending-events" data-item-display="slider"
     data-slides-per-view="1" data-image-width="1150" data-image-height="350"></div>

03

Category slider

Four slides per view across multiple feeds: general, concerts and sports.

data-namesdata-slides-per-view="4"

embed

<div data-widget="trending-slider" data-country-code="us"
     data-names="general-trending-events,concerts-trending-events,sports-trending-events"
     data-item-display="slider" data-slides-per-view="4"></div>

04

Banner slider — spotlight

Full-bleed spotlight heroes in the Performer Banner style, one slide per view.

data-item-display="banner"

embed

<div data-widget="trending-slider" data-country-code="us"
     data-name="general-trending-events"
     data-item-display="banner" data-slides-per-view="1"></div>

05

Row — separated

Three-column separated tiles, opening links in a new tab.

data-item-display="separated"data-link-target="_blank"

embed

<div data-widget="trending" data-country-code="us"
     data-name="general-trending-events" data-item-display="separated"
     data-columns="3" data-link-target="_blank"></div>

06

Row — stacked

Stacked list layout scoped to Canada; links open in the same tab.

data-item-display="stacked"data-country-code="ca"

embed

<div data-widget="trending" data-country-code="ca"
     data-name="general-trending-events"
     data-item-display="stacked" data-link-target="_self"></div>

07

Row — banner

Three-column banner tiles in the Performer Banner tile style: image, name and CTA.

data-item-display="banner"

embed

<div data-widget="trending" data-country-code="us"
     data-name="general-trending-events"
     data-item-display="banner" data-columns="3"></div>

08

Columns — separated

Three feeds side by side, each rendered as a separated column.

data-group-display="column"

embed

<div data-widget="trending" data-country-code="us" data-name="general-trending-events"
     data-group-display="column" data-item-display="separated"></div>
<!-- repeat for concerts-trending-events, sports-trending-events -->

09

Columns — stacked

The same three feeds rendered as stacked columns.

data-group-display="column"data-item-display="stacked"

embed

<div data-widget="trending" data-country-code="us" data-name="general-trending-events"
     data-group-display="column" data-item-display="stacked"></div>
<!-- repeat for concerts-trending-events, sports-trending-events -->