Carousel - Component
Code
Source (Nunjucks)
<web-carousel>
<div class="carousel">
<button class="icon-button" data-direction="prev" aria-label="back">
{% include "icons/carat-back.svg" %}
</button>
<div class="carousel__track reel" data-scroll="snap">
{% for item in data.items %}
{# Note, we're just repeating the same content in an iteration #}
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
{% include "icons/mortarboard.svg" %}
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible episodes
covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
{% endfor %}
</div>
<button class="icon-button" data-direction="next" aria-label="forward">
{% include "icons/carat-forward.svg" %}
</button>
</div>
</web-carousel>Output
<web-carousel>
<div class="carousel">
<button class="icon-button" data-direction="prev" aria-label="back">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.41 16.0699L10.83 11.7053L15.41 7.34075L14 6L8 11.7053L14 17.4106L15.41 16.0699Z"
/>
</svg>
</button>
<div class="carousel__track reel" data-scroll="snap">
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
<div>
<a href="#" class="card" data-style="branded">
<div class="card__header repel">
<p class="color-mid-text">Course</p>
<div class="t-color-shades-light-bright counter t-bg-core-primary">
<span class="counter__content">24</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
/>
<path
d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
/>
</svg>
</div>
</div>
<img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
<div class="card__content flow">
<h3 class="visually-hidden">Learn CSS</h3>
<img
class="card__logo"
src="/images/courses/css/logo.svg"
alt=""
aria-hidden="true"
/>
<p class="text-size-0">
Let’s gleefully breakdown complex aspects of CSS into digestible
episodes covering everything from accessibility to z-index.
</p>
</div>
</a>
</div>
</div>
<button class="icon-button" data-direction="next" aria-label="forward">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 7.34075L12.58 11.7053L8 16.0699L9.41 17.4106L15.41 11.7053L9.41 6L8 7.34075Z"
/>
</svg>
</button>
</div>
</web-carousel>Information
The carousel has a dependency of The Reel layout composition. It is an extension of that layout's scrolling capability.