<section class="carousel-widget container">
<div class="container__content">
<div class="container__header">
<h2 class="heading-section ">This is the heading used to top a section</h2>
</div>
<div class="carousel-widget__content">
<div class="tabbed-carousel" data-behavior="tabs-with-carousel">
<div class="tabbed-carousel__navigation">
<div class="tabbed-carousel__tab-list" role="tablist" aria-label="">
<a href="#panel-latest-videos" role="tab" aria-selected="true" aria-controls="panel-latest-videos" id="tab-latest-videos" tabindex="0" data-behavior="latest-videos">
latest videos
</a>
<a href="#panel-highlights" role="tab" aria-selected="false" aria-controls="panel-highlights" id="tab-highlights" tabindex="0" data-behavior="highlights">
highlights
</a>
<a href="#panel-live" role="tab" aria-selected="false" aria-controls="panel-live" id="tab-live" tabindex="0" data-behavior="live">
live
</a>
<a href="#panel-archive" role="tab" aria-selected="false" aria-controls="panel-archive" id="tab-archive" tabindex="0" data-behavior="archive">
archive
</a>
</div>
<div class="tabbed-carousel__select-list">
<select data-behavior="tabbed-carousel-select-list">
<option selected value="latest-videos">latest videos</option>
<option value="highlights">highlights</option>
<option value="live">live</option>
<option value="archive">archive</option>
</select>
</div>
</div>
<div class="tabbed-carousel__tab-panels">
<div id="panel-latest-videos" role="tabpanel" tabindex="0" aria-labelledby="tab-latest-videos" data-tab-label="latest videos">
<div class="carousel" data-behavior="carousel-latest-videos">
<div>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" data-poster-image="/assets/example-content/womens-hero-600.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="vimeo-video-lightbox" data-video-id="545863177" data-poster-image="/assets/example-content/autoplay-hero-error.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-highlights" role="tabpanel" tabindex="0" aria-labelledby="tab-highlights" data-tab-label="highlights">
<div class="carousel" data-behavior="carousel-highlights">
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-live" role="tabpanel" tabindex="0" aria-labelledby="tab-live" data-tab-label="live">
<div class="carousel" data-behavior="carousel-live">
<div>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" data-poster-image="/assets/example-content/womens-hero-600.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="vimeo-video-lightbox" data-video-id="545863177" data-poster-image="/assets/example-content/autoplay-hero-error.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div id="panel-archive" role="tabpanel" tabindex="0" aria-labelledby="tab-archive" data-tab-label="archive">
<div class="carousel" data-behavior="carousel-archive">
<div>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" data-poster-image="/assets/example-content/womens-hero-600.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<button class="content-card content-card--video" id="video-dialog-label" data-behavior="vimeo-video-lightbox" data-video-id="545863177" data-poster-image="/assets/example-content/autoplay-hero-error.png">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">02.04 <span>video</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Sponsored</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</button>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
<div>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="https://www.youtube.com/watch?v=H11o250_xCA" class="content-card content-card--video">
<div class="content-card__image-bg">
<img src="/assets/example-content/video-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">Video Card - 1</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
<a target="_blank" href="/" class="content-card content-card--article">
<div class="content-card__image-bg">
<img src="/assets/example-content/article-card-image.png" />
</div>
<div class="time">5 min <span>read</span></div>
<div class="content-card__content">
<div class="content-card__content--dark-gradient">
<div class="sponsor-logo">
<img src="/assets/example-content/content-card-sponsor.svg" alt="sponsor">
</div>
</div>
<div class="content-card__content--info">
<div class="sponsored-label">Men's Senior</div>
<p class="title">head & shoulders present: Jack grealish, The heard yeards</p>
<hr />
<div class="dateduration-wrap">
<span class="date">11 Oct 2020</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<span class="visually-hidden">Previous page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
<button aria-label="Next" class="carousel__cta carousel__next tabbed-carousel__next">
<span class="visually-hidden">Next page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"heading": "Latest Videos From The Three Lions",
"withVideos": true
}
.carousel-widget {
width: 100%;
max-width: 37.4rem;
&__content {
margin-top: 4.2rem;
}
@media screen and (min-width: $mq-medium) {
max-width: 100%;
&__content {
margin-top: 3.8rem;
}
}
}
<section class="carousel-widget container">
<div class="container__content">
{{#if heading}}
<div class="container__header">
{{render '@heading--section' heading merge=true}}
</div>
{{/if}}
<div class="carousel-widget__content">
{{#if withVideos}}
{{render '@tabbed-carousel--default'}}
{{/if}}
{{#if withNewsArticles}}
{{render '@tabbed-carousel--with-news-articles'}}
{{/if}}
{{#if withoutPagination}}
{{render '@tabbed-carousel--with-video-without-pagination'}}
{{/if}}
</div>
</div>
</section>