Component patterns

A collection of cross browser UI components for use in accelerating or inspiring your own design systems.

Welcome to our growing collection of component patterns. These can provide inspiration, accessibility requirements, adaptive strategies for viewport and user preferences, and more.

Breadcrumbs

<nav class="breadcrumbs" role="navigation">
  <a href="./home/">
    <span class="crumbicon">
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
        <use href="#icon-home" />
      </svg>
    </span>
    <span class="home-label">Home</span>
  </a>

  <span class="crumb-separator" aria-hidden="true">»</span>

  <span class="crumb">
    <a aria-current="page">Page A</a>
    <span class="crumbicon">
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
        <use href="#icon-dropdown-arrow" />
      </svg>
      <select class="disguised-select" title="Navigate to another page">
        <option selected>Page A</option>
        <option>Page B</option>
        <option>Page C</option>
      </select>
    </span>
  </span>
</nav>

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path
      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7" />
  </symbol>

</svg>

const crumbs         = document.querySelectorAll('.breadcrumbs select')
const allowedKeys    = new Set(['Tab', 'Enter', ' '])
const preventedKeys  = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for *full* changes,
// ensures it's not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return

    const option = e.target
    const choice = option.value
    const crumb = option.closest('.crumb')

    // flag crumb so adjacent siblings can be hidden
    crumb.classList.add('tree-changed')

    // update crumb text to reflect the user's choice
    crumb.querySelector(':scope > a').textContent = choice

    routePage(choice)
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

const routePage = route => {
  console.info('change path to: ', route)
  // change entire URL (window.location)
  // or 
  // use your favorite clientside framework's router
}

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > a:first-of-type:not(.crumb) {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--nav-gap) / 4);

    @media (width <= 480px) { & > .home-label {
      display: none;
    }}
  }

  & a {
    text-underline-offset: .25em;
    outline-offset: 3px;

    /* fix Safari inaccessible dark color scheme links */
    /* https://bugs.webkit.org/show_bug.cgi?id=226893 */
    @media (prefers-color-scheme: dark) {
      @supports (-webkit-hyphens:none) { &[href] {
        color: hsl(240 100% 81%);
      }}
    }
  }

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) {
    scroll-snap-type: none;
  }
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }

  &.tree-changed ~ * {
    display: none;
  }
}

.crumb-separator {
  color: ButtonText;
}

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px);
}

.crumbicon {
  --size: 3ch;

  display: grid;
  grid: [stack] var(--size) / [stack] var(--size);
  place-items: center;
  border-radius: 50%;

  --icon-shadow-size: 0px;
  box-shadow: inset 0 0 0 var(--icon-shadow-size) currentColor;
  
  @media (--motionOK) { & {
    transition: box-shadow .2s ease;
  }}

  @nest .crumb:is(:focus-within, :hover) > & {
    --icon-shadow-size: 1px;
  }

  @nest .crumb > &:is(:focus-within, :hover) {
    --icon-shadow-size: 2px;

    & svg {
      stroke-width: 2px;
    }
  }

  & > * {
    grid-area: stack;
  }

  & > svg {
    max-block-size: 100%;
    margin: calc(var(--nav-gap) / 4);

    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
  }
}

Open demo

This pattern shows how to create a responsive and accessible breadcrumbs component for users to navigate your site.

Full article · Video on YouTube · Source on Github

Learn more

Buttons

<section>
  <h2>9 button types</h2>
  <p>Unified modern style, visual differences reinforce purpose.</p>
</section>

<button>Default</button>
<input type="button" value="<input>"/>
<button>
  <svg viewBox="0 0 24 24" stroke="currentColor" width="24" height="24" aria-hidden="true">
    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
  </svg>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="file"]
),
:where(input[type="file"])::file-selector-button {
  --_accent-light: hsl(210 100% 40%);
  --_accent-dark: hsl(210 50% 70%);
  --_accent: var(--_accent-light);

  --_text-light: hsl(210 10% 30%);
  --_text-dark: hsl(210 5% 95%);
  --_text: var(--_text-light);
  
  --_bg-light: hsl(0 0% 100%);
  --_bg-dark: hsl(210 9% 31%);
  --_bg: var(--_bg-light);

  --_input-well-light: hsl(210 16% 87%);
  --_input-well-dark: hsl(204 10% 10%);
  --_input-well: var(--_input-well-light);

  --_padding-inline: 1.75ch;
  --_padding-block: .75ch;
  
  --_border-radius: .5ch;
  --_border-light: hsl(210 14% 89%);
  --_border-dark: var(--_bg-dark);
  --_border: var(--_border-light);
  
  --_highlight-size: 0;
  --_highlight-light: hsl(210 10% 71% / 25%);
  --_highlight-dark: hsl(210 10% 5% / 25%);
  --_highlight: var(--_highlight-light);
  
  --_ink-shadow-light: 0 1px 0 var(--_border-light);
  --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
  --_ink-shadow: var(--_ink-shadow-light);
  
  --_icon-size: 2ch;
  --_icon-color: var(--_accent);

  --_shadow-color-light: 220 3% 15%;
  --_shadow-color-dark: 220 40% 2%;
  --_shadow-color: var(--_shadow-color-light);
  --_shadow-strength-light: 1%;
  --_shadow-strength-dark: 25%;
  --_shadow-strength: var(--_shadow-strength-light);
  --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
  --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
  
  --_shadow-depth-light: 0 1px var(--_border-light);
  --_shadow-depth-dark: 0 1px var(--_bg-dark);
  --_shadow-depth: var(--_shadow-depth-light);

  --_transition-motion-reduce: ;
  --_transition-motion-ok:
    box-shadow 145ms ease,
    outline-offset 145ms ease
  ;
  --_transition: var(--_transition-motion-reduce);

  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  border-radius: var(--_border-radius);
}

@media (prefers-color-scheme: dark) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_bg: var(--_bg-dark);
    --_text: var(--_text-dark);
    --_border: var(--_border-dark);
    --_accent: var(--_accent-dark);
    --_highlight: var(--_highlight-dark);
    --_input-well: var(--_input-well-dark);
    --_ink-shadow: var(--_ink-shadow-dark);
    --_shadow-depth: var(--_shadow-depth-dark);
    --_shadow-color: var(--_shadow-color-dark);
    --_shadow-strength: var(--_shadow-strength-dark);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]
  ),
  :where(input[type="file"])::file-selector-button {
    --_transition: var(--_transition-motion-ok);
  }
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
  touch-action: manipulation;

  font-size: var(--_size, 1rem);
  background: var(--_bg);
  color: var(--_text);
  border: 2px solid var(--_border);
  box-shadow: 
    var(--_shadow-2),
    var(--_shadow-depth),
    0 0 0 var(--_highlight-size) var(--_highlight)
  ;
  text-shadow: var(--_ink-shadow);
  transition: var(--_transition);
  
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1ch;
  
  font-weight: 700;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);

  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* icons */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) > :where(svg, [data-icon]) {
  block-size: var(--_icon-size);
  inline-size: var(--_icon-size);
  stroke: var(--_icon-color);
  filter: drop-shadow(var(--_ink-shadow));

  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* focus */
:where(button, input):where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

/* pressing */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):where(:not(:active):hover) {
  --_highlight-size: .5rem;
}

/* disabled */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
)[disabled] {
  --_bg: none;
  --_text-light: hsl(210 7% 40%);
  --_text-dark: hsl(210 11% 71%);

  cursor: not-allowed;
  box-shadow: var(--_shadow-1);
}

/* adaptive indigo text */
:where(
  [type="submit"], 
  form button:not([type],[disabled])
) {
  --_text: var(--_accent);
} 

/* red reset */
:where([type="reset"]) {
  --_border-light: hsl(0 100% 83%);
  --_highlight-light: hsl(0 100% 89% / 20%);
  --_text-light: hsl(0 80% 50%);
  --_text-dark: hsl(0 100% 89%);
}

:where([type="reset"]):focus-visible {
  outline-color: currentColor;
}

/* file input */
:where(input[type="file"]) {
  inline-size: 100%;
  max-inline-size: max-content;
  background-color: var(--_input-well);
}

:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
  appearance: none;
}

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--_padding-inline);
}

/* special dark theme styles */
@media (prefers-color-scheme: dark) {
  :where(
    [type="submit"],
    [type="reset"],
    [disabled],
    form button:not([type="button"])
  ) {
    --_bg: var(--_input-well);
  }
}

Open demo

This pattern shows how to style the different buttons types of the web.

Full article · Video on YouTube · Source on Github

Learn more

Carousel

<div class="gui-carousel" carousel-pagination="dots" carousel-controls="auto" carousel-scrollbar="auto"
  carousel-snapstop="auto" aria-label="Featured Items Carousel">
  <div class="gui-carousel--scroller">

    <div class="gui-carousel--snap">
      <figure class="animate-visibility captioned-image">
        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/this/1280/720.webp"
          alt="Blue ocean with a large wave">
        <figcaption>
          <a href="#">Learn more about large ocean waves</a>
        </figcaption>
      </figure>
    </div>

    <div class="gui-carousel--snap">
      <figure class="animate-visibility captioned-image">
        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/is/1280/720.webp"
          alt="Frosty orange desert sunset">
        <figcaption>
          <a href="#">Learn more about warm deserts</a>
        </figcaption>
      </figure>
    </div>

    <div class="gui-carousel--snap">
      <figure class="animate-visibility captioned-image">
        <img loading="lazy" width="1280" height="720" src="https://picsum.photos/seed/a/1280/720.webp"
          alt="African sahara with a giraffe">
        <figcaption>
          <a href="#">Learn more about giraffe's</a>
        </figcaption>
      </figure>
    </div>

  </div>
</div>

import {scrollend} from 'https://cdn.jsdelivr.net/gh/argyleink/scrollyfills@latest/dist/scrollyfills.modern.js'

export default class Carousel {
  constructor(element) {
    this.elements = {
      root:       element,
      scroller:   element.querySelector('.gui-carousel--scroller'),
      snaps:      element.querySelectorAll('.gui-carousel--snap'),
      previous:   null, // generated in #createControl
      next:       null, // generated in #createControl
      pagination: null, // generated in #createPagination
    }

    this.current = undefined        // set in #initializeState
    this.hasIntersected = new Set() // holds intersection results used on scrollend

    this.elements.root.setAttribute('tabindex', -1)
    this.elements.root.setAttribute('aria-roledescription', 'carousel')

    this.elements.scroller.setAttribute('role', 'group')
    this.elements.scroller.setAttribute('aria-label', 'Items Scroller')
    this.elements.scroller.setAttribute('aria-live', 'Polite')

    this.#createObservers()
    this.#createPagination()
    this.#createControls()
    this.#initializeState()
    this.#listen()
    this.#synchronize()
  }

  #synchronize() {
    for (let observation of this.hasIntersected) {
      // toggle inert when it's not intersecting
      observation.target
        .toggleAttribute('inert', !observation.isIntersecting)

      // toggle aria-selected on pagination dots
      const dot = this.elements.pagination
        .children[this.#getElementIndex(observation.target)]

      dot.setAttribute('aria-selected', observation.isIntersecting)
      dot.setAttribute('tabindex', !observation.isIntersecting ? '-1' : '0')

      // stash the intersecting snap element
      if (observation.isIntersecting) {
        this.current = observation.target
        this.goToElement({
          scrollport: this.elements.pagination,
          element: dot,
        })
      }
    }

    this.#updateControls()
    this.hasIntersected.clear()
  }

  goNext() {
    const next = this.current.nextElementSibling

    if (this.current === next)
      return

    if (next) {
      this.goToElement({
        scrollport: this.elements.scroller,
        element: next,
      })
      this.current = next
    }
    else {
      console.log('at the end')
    }
  }

  goPrevious() {
    const previous = this.current.previousElementSibling

    if (this.current === previous)
      return

    if (previous) {
      this.goToElement({
        scrollport: this.elements.scroller,
        element: previous,
      })
      this.current = previous
    }
    else {
      console.log('at the beginning')
    }
  }

  goToElement({scrollport, element}) {
    const dir = this.#documentDirection()

    const delta = Math.abs(scrollport.offsetLeft - element.offsetLeft)
    const scrollerPadding = parseInt(getComputedStyle(scrollport)['padding-left'])

    const pos = scrollport.clientWidth / 2 > delta
      ? delta - scrollerPadding
      : delta + scrollerPadding

    scrollport.scrollTo(dir === 'ltr' ? pos : pos*-1, 0)
  }

  #updateControls() {
    const {lastElementChild:last, firstElementChild:first} = this.elements.scroller

    const isAtEnd   = this.current === last
    const isAtStart = this.current === first

    // before we possibly disable a button
    // shift the focus to the complimentary button
    if (document.activeElement === this.elements.next && isAtEnd)
      this.elements.previous.focus()
    else if (document.activeElement === this.elements.previous && isAtStart)
      this.elements.next.focus()

    this.elements.next.toggleAttribute('disabled', isAtEnd)
    this.elements.previous.toggleAttribute('disabled', isAtStart)
  }

  #listen() {
    // observe children intersection
    for (let item of this.elements.snaps)
      this.carousel_observer.observe(item)

    // watch document for removal of this carousel node
    this.mutation_observer.observe(document, {
      childList: true,
      subtree: true,
    })

    // scrollend listener for sync
    this.elements.scroller.addEventListener('scrollend', this.#synchronize.bind(this))
    this.elements.next.addEventListener('click', this.goNext.bind(this))
    this.elements.previous.addEventListener('click', this.goPrevious.bind(this))
    this.elements.pagination.addEventListener('click', this.#handlePaginate.bind(this))
    this.elements.root.addEventListener('keydown', this.#handleKeydown.bind(this))
  }

  #unlisten() {
    for (let item of this.elements.snaps)
      this.carousel_observer.unobserve(item)

    this.mutation_observer.disconnect()

    this.elements.scroller.removeEventListener('scrollend', this.#synchronize)
    this.elements.next.removeEventListener('click', this.goNext)
    this.elements.previous.removeEventListener('click', this.goPrevious)
    this.elements.pagination.removeEventListener('click', this.#handlePaginate)
    this.elements.root.removeEventListener('keydown', this.#handleKeydown)
  }

  #createObservers() {
    this.carousel_observer = new IntersectionObserver(observations => {
      for (let observation of observations) {
        this.hasIntersected.add(observation)

        // toggle --in-view class if intersecting or not
        observation.target.classList
          .toggle('--in-view', observation.isIntersecting)
      }
    }, {
      root: this.elements.scroller,
      threshold: .6,
    })

    this.mutation_observer = new MutationObserver((mutationList, observer) => {
      mutationList
        .filter(x => x.removedNodes.length > 0)
        .forEach(mutation => {
          [...mutation.removedNodes]
            .filter(x => x.querySelector('.gui-carousel') === this.elements.root)
            .forEach(removedEl => {
              this.#unlisten()
            })
        })
    })
  }

  #initializeState() {
    const startIndex = this.elements.root.hasAttribute('carousel-start')
      ? this.elements.root.getAttribute('carousel-start') - 1
      : 0

    this.current = this.elements.snaps[startIndex]
    this.#handleScrollStart()

    // each snap target needs a marker for pagination
    // each snap needs some a11y love
    this.elements.snaps.forEach((snapChild, index) => {
      this.hasIntersected.add({
        isIntersecting: index === 0,
        target: snapChild,
      })

      this.elements.pagination
        .appendChild(this.#createMarker(snapChild, index))

      snapChild.setAttribute('aria-label', `${index+1} of ${this.elements.snaps.length}`)
      snapChild.setAttribute('aria-roledescription', 'item')
    })
  }

  #handleScrollStart() {
    if (this.elements.root.hasAttribute('carousel-start')) {
      const itemIndex = this.elements.root.getAttribute('carousel-start')
      const startElement = this.elements.snaps[itemIndex - 1]

      this.elements.snaps.forEach(snap =>
        snap.style.scrollSnapAlign = 'unset')

      startElement.style.scrollSnapAlign = null
      startElement.style.animation = 'carousel-scrollstart 1ms'

      startElement.addEventListener('animationend', e => {
        startElement.animation = null
        this.elements.snaps.forEach(snap =>
          snap.style.scrollSnapAlign = null)
      }, {once: true})
    }
  }

  #handlePaginate(e) {
    if (e.target.classList.contains('gui-carousel--pagination'))
      return

    e.target.setAttribute('aria-selected', true)
    const item = this.elements.snaps[this.#getElementIndex(e.target)]

    this.goToElement({
      scrollport: this.elements.scroller,
      element: item,
    })
  }

  #handleKeydown(e) {
    const dir = this.#documentDirection()
    const idx = this.#getElementIndex(e.target)

    switch (e.key) {
      case 'ArrowRight':
        e.preventDefault()

        const next_offset = dir === 'ltr' ? 1 : -1
        const next_control = dir === 'ltr' ? this.elements.next : this.elements.previous

        if (e.target.closest('.gui-carousel--pagination'))
          this.elements
            .pagination.children[idx + next_offset]
            ?.focus()
        else {
          if (document.activeElement === next_control)
            this.#keypressAnimation(next_control)
          next_control.focus()
        }

        dir === 'ltr' ? this.goNext() : this.goPrevious()
        break
      case 'ArrowLeft':
        e.preventDefault()

        const previous_offset = dir === 'ltr' ? -1 : 1
        const previous_control = dir === 'ltr' ? this.elements.previous : this.elements.next

        if (e.target.closest('.gui-carousel--pagination'))
          this.elements
            .pagination.children[idx + previous_offset]
            ?.focus()
        else {
          if (document.activeElement === previous_control)
            this.#keypressAnimation(previous_control)
          previous_control.focus()
        }

        dir === 'ltr' ? this.goPrevious() : this.goNext()
        break
    }
  }

  #getElementIndex(element) {
    let index = 0
    while (element = element.previousElementSibling)
      index++
    return index
  }

  #createPagination() {
    let nav = document.createElement('nav')
    nav.className = 'gui-carousel--pagination'
    this.elements.root.appendChild(nav)

    this.elements.pagination = nav
  }

  #createMarker(item, index) {
    const markerType = this.elements.root.getAttribute('carousel-pagination')
    index++ // user facing index shouldnt start at 0

    if (markerType == 'gallery')
      return this.#createMarkerGallery({index, type: markerType, item})
    else
      return this.#createMarkerDot({index, type: markerType, item})
  }

  #createMarkerDot({index, type, item}) {
    const marker = document.createElement('button')
    const img = item.querySelector('img')
    const caption = item.querySelector('figcaption')
    marker.className = 'gui-carousel--control'
    marker.type = 'button'
    marker.role = 'tab'
    marker.title = `Item ${index}: ${img?.alt || caption?.innerText}`
    marker.setAttribute('aria-label', img?.alt || caption?.innerText)
    marker.setAttribute('aria-setsize', this.elements.snaps.length)
    marker.setAttribute('aria-posinset', index)
    marker.setAttribute('aria-controls', `carousel-item-${index}`)
    return marker
  }

  #createMarkerGallery({index, type, item}) {
    const marker = document.createElement('button')
    const img = item.querySelector('img')
    marker.style.backgroundImage = `url(${img.src})`
    marker.className = 'gui-carousel--control --gallery'
    marker.type = 'button'
    marker.role = 'tab'
    marker.title = `Item ${index}: ${img.alt}`
    marker.setAttribute('aria-label', img.alt)
    marker.setAttribute('aria-setsize', this.elements.snaps.length)
    marker.setAttribute('aria-posinset', index)
    marker.setAttribute('aria-controls', `carousel-item-${index}`)
    return marker
  }

  #createControls() {
    let controls = document.createElement('div')
    controls.className = 'gui-carousel--controls'

    let prevBtn = this.#createControl('previous')
    let nextBtn = this.#createControl('next')

    controls.appendChild(prevBtn)
    controls.appendChild(nextBtn)

    this.elements.previous = prevBtn
    this.elements.next = nextBtn
    this.elements.root.prepend(controls)
  }

  #createControl(btnType) {
    let control = document.createElement('button')
    let userFacingText = `${btnType.charAt(0).toUpperCase() + btnType.slice(1)} Item`

    control.type = 'button'
    control.title = userFacingText
    control.className = `gui-carousel--control --${btnType}`
    control.setAttribute('aria-controls', 'gui-carousel--controls')
    control.setAttribute('aria-label', userFacingText)

    let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg.setAttribute('aria-hidden', 'true')
    svg.setAttribute('viewBox', '0 0 20 20')
    svg.setAttribute('fill', 'currentColor')

    let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    path.setAttribute('fill-rule', 'evenodd')
    path.setAttribute('clip-rule', 'evenodd')

    let previousPath = 'M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z'
    let nextPath = 'M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z'

    path.setAttribute('d', btnType === 'next' ? nextPath : previousPath)

    svg.appendChild(path)
    control.appendChild(svg)

    return control
  }

  #keypressAnimation(element) {
    element.style.animation = 'gui-carousel--control-keypress 145ms var(--ease-2)'
    element.addEventListener('animationend', e => {
      element.style.animation = null
    }, {once: true})
  }

  #documentDirection() {
    return document.firstElementChild.getAttribute('dir') || 'ltr'
  }
}

document.querySelectorAll('.gui-carousel').forEach(element => {
  new Carousel(element)
})

:where(.gui-carousel) {
  --_carousel-item-size: 80%;
  --_carousel-gutters: max(4rem, calc((100% - var(--_carousel-item-size)) / 2));
  --_carousel-scrollbar-gutter: var(--size-6);
  --_carousel-pagination-size: var(--size-8);

  display: grid;
  grid-template-columns: [carousel-gutter] var(--_carousel-gutters) 1fr [carousel-gutter] var(--_carousel-gutters);
  grid-template-rows:
    [carousel-scroller] 1fr
    [carousel-pagination] var(--_carousel-pagination-size);

  &:focus-visible {
    outline-offset: -5px;
  }

  /* configuration handlers */
  &[carousel-pagination="gallery"] {
    --_carousel-pagination-size: var(--size-10);

    & > .gui-carousel--pagination {
      -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 5%, 95%, #000, #0000);
    }
  }

  &[carousel-pagination="none"] {
    grid-template-rows: [carousel-scroller] 1fr;

    & > .gui-carousel--pagination {
      display: none;
    }
  }

  &[carousel-controls="none"] {
    grid-template-columns: 0 1fr 0;

    & > .gui-carousel--controls {
      display: none;
    }
  }

  &[carousel-scrollbar="none"] {
    --_carousel-pagination-size: var(--size-5);

    & > .gui-carousel--scroller {
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    & > .gui-carousel--pagination {
      place-self: start center;
    }
  }

  &[carousel-snapstop="always"] .gui-carousel--snap {
    scroll-snap-stop: always;
  }
}

:where(.gui-carousel--scroller) {
  grid-row: 1;
  grid-column: 1/-1;

  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--_carousel-gutters);

  padding-block: var(--size-2) var(--_carousel-scrollbar-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--_carousel-gutters);
  padding-inline: var(--_carousel-gutters);

  @media (--motionOK) {
    scroll-behavior: smooth;
  }
}

:where(.gui-carousel--snap) {
  scroll-snap-align: center;
}

:where(.gui-carousel--controls) {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--_carousel-gutters);
  display: contents;

  & > .gui-carousel--control {
    margin-block-end: var(--_carousel-scrollbar-gutter);

    &:not([disabled="true"]):active {
      transform: scale(.95);
    }
  }
}

:where(.gui-carousel--control) {
  --_shadow-size: 0;
  --_shadow-highlight-light: hsl(0 0% 50% / 10%);
  --_shadow-highlight-dark: hsl(0 0% 100% / 20%);
  --_shadow-highlight: var(--_shadow-highlight-light);

  grid-row: 1;
  place-self: center;
  background: var(--surface-1);
  color: var(--text-2);
  inline-size: var(--size-8);
  aspect-ratio: var(--ratio-square);
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 var(--_shadow-size) var(--_shadow-highlight);
  border: var(--border-size-1) solid transparent;
  text-indent: 10ch;
  padding: 0;
  overflow: hidden;
  z-index: var(--layer-1);
  transition: opacity .5s var(--ease-2) .5s;

  @media (--motionOK) {
    transition:
      opacity .5s var(--ease-2) .5s,
      transform .2s var(--ease-4),
      box-shadow .2s var(--ease-4),
      outline-offset 145ms var(--ease-2)
    ;
  }

  @media (--OSdark) {
    --_shadow-highlight: var(--_shadow-highlight-dark);
  }

  &:hover {
    --_shadow-size: 6px;
  }

  &.--previous {
    grid-column: 1;
  }

  &.--next {
    grid-column: 3;
  }

  @nest [dir="rtl"] & > svg {
    transform: rotateY(180deg);
  }

  &[disabled] {
    cursor: not-allowed;
    transition-delay: 0s;

    & > svg {
      opacity: .25;
    }
  }

  &:not([disabled]):is(:hover, :focus-visible) {
    color: var(--link);
  }

  &:not([disabled]) svg > path {
    @media (--motionOK) {
      --_transform: translateX(var(--_x)) scale(.95);
      transition: transform .5s var(--ease-squish-3);
      transform-origin: center center;
    }
  }

  &[aria-label="Next Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
    --_x: 2px;
    transform: var(--_transform);
  }

  &[aria-label="Previous Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
    --_x: -2px;
    transform: var(--_transform);
  }
}

:where(.gui-carousel--pagination) {
  grid-column: 1/-1;
  place-self: center;

  display: grid;
  grid-auto-flow: column;
  gap: var(--size-2);

  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;

  padding-block: var(--size-2);
  padding-inline: var(--size-4);

  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  @media (--motionOK) {
    scroll-behavior: smooth;
  }

  @nest [carousel-pagination="gallery"] & {
    margin-block-end: 0;
  }

  & > [aria-selected="true"] {
    background: var(--link);
  }

  & > [aria-selected="false"] {
    transform: scale(.75);
  }

  & > button {
    inline-size: var(--size-3);
    background-color: var(--surface-4);
    border: var(--border-size-1) solid transparent;

    &.--gallery {
      inline-size: var(--size-fluid-5);
      border-radius: var(--radius-2);
      border: none;
      background-origin: border-box;
      background-size: cover;
    }
  }
}

@keyframes gui-carousel--control-keypress {
  0%  { outline-offset: 5px }
  50% { outline-offset: 0; }
}

@keyframes carousel-scrollstart {
  from { scroll-snap-align: center }
  to   { scroll-snap-align: unset }
}

Open demo

This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the dialog element.

Video on YouTube · Source on Github

Learn more

Dialog

<dialog id="MegaDialog" inert loading modal-mode="mega"> 
  <form method="dialog">
    <header> 
      <section class="icon-headline">
        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="8.5" cy="7" r="4"></circle>
          <line x1="20" y1="8" x2="20" y2="14"></line>
          <line x1="23" y1="11" x2="17" y2="11"></line>
        </svg>
        <h3>New User</h3>
      </section>
      <button onclick="this.closest('dialog').close('close')" type="button" title="Close dialog"> 
        <title>Close dialog icon</title>
        <svg width="24" height="24" viewBox="0 0 24 24">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </header>
    <article>
      <section class="labelled-input">
        <label for="userimage">Upload an image</label>
        <input id="userimage" name="userimage" type="file">
      </section>
      <small><b>*</b> Maximum upload 1mb</small>
    </article>
    <footer>
      <menu>
        <button type="reset" value="clear">Clear</button>
      </menu>
      <menu>
        <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>

<dialog id="MiniDialog" inert loading modal-mode="mini"> 
  <form method="dialog">
    <article>
      <section class="warning-message">
        <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" >
          <title>A warning icon</title>
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
          <line x1="12" y1="9" x2="12" y2="13"></line>
          <line x1="12" y1="17" x2="12.01" y2="17"></line>
        </svg>
        <p>Are you sure you want to remove this user?</p>
      </section>
    </article>
    <footer>
      <menu>
        <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>

// custom events to be added to <dialog>
const dialogClosingEvent = new Event('closing')
const dialogClosedEvent  = new Event('closed')
const dialogOpeningEvent = new Event('opening')
const dialogOpenedEvent  = new Event('opened')
const dialogRemovedEvent = new Event('removed')

// track opening
const dialogAttrObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(async mutation => {
    if (mutation.attributeName === 'open') {
      const dialog = mutation.target

      const isOpen = dialog.hasAttribute('open')
      if (!isOpen) return

      dialog.removeAttribute('inert')

      // set focus
      const focusTarget = dialog.querySelector('[autofocus]')
      focusTarget
        ? focusTarget.focus()
        : dialog.querySelector('button').focus()

      dialog.dispatchEvent(dialogOpeningEvent)
      await animationsComplete(dialog)
      dialog.dispatchEvent(dialogOpenedEvent)
    }
  })
})

// track deletion
const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(mutation => {
    mutation.removedNodes.forEach(removedNode => {
      if (removedNode.nodeName === 'DIALOG') {
        removedNode.removeEventListener('click', lightDismiss)
        removedNode.removeEventListener('close', dialogClose)
        removedNode.dispatchEvent(dialogRemovedEvent)
      }
    })
  })
})

// wait for all dialog animations to complete their promises
const animationsComplete = element =>
  Promise.allSettled(
    element.getAnimations().map(animation => 
      animation.finished))

// click outside the dialog handler
const lightDismiss = ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
}

const dialogClose = async ({target:dialog}) => {
  dialog.setAttribute('inert', '')
  dialog.dispatchEvent(dialogClosingEvent)

  await animationsComplete(dialog)

  dialog.dispatchEvent(dialogClosedEvent)
}

// page load dialogs setup
export default async function (dialog) {
  dialog.addEventListener('click', lightDismiss)
  dialog.addEventListener('close', dialogClose)

  dialogAttrObserver.observe(dialog, { 
    attributes: true,
  })

  dialogDeleteObserver.observe(document.body, {
    attributes: false,
    subtree: false,
    childList: true,
  })

  // remove loading attribute
  // prevent page load @keyframes playing
  await animationsComplete(dialog)
  dialog.removeAttribute('loading')
}

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

html:has(dialog[open][modal-mode="mega"]) {
  overflow: hidden;
}

dialog {
  display: grid;
  background: var(--surface-2);
  color: var(--text-1);
  max-inline-size: min(90vw, var(--size-content-3));
  max-block-size: min(80vh, 100%);
  max-block-size: min(80dvb, 100%);
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
  z-index: var(--layer-important);
  overflow: hidden;
  transition: opacity .5s var(--ease-3);

  @media (--motionOK) {
    animation: var(--animation-scale-down) forwards;
    animation-timing-function: var(--ease-squish-3);
  }

  @media (--OSdark) {
    border-block-start: var(--border-size-1) solid var(--surface-3);
  }

  @media (--md-n-below) {
    &[modal-mode="mega"] {
      margin-block-end: 0;
      border-end-end-radius: 0;
      border-end-start-radius: 0;

      @media (--motionOK) {
        animation: var(--animation-slide-out-down) forwards;
        animation-timing-function: var(--ease-squish-2);
      }
    }
  }

  &:not([open]) {
    pointer-events: none;
    opacity: 0;
  }

  &[modal-mode="mega"]::backdrop {
    backdrop-filter: blur(25px);
  }

  &[modal-mode="mini"]::backdrop {
    backdrop-filter: none;
  }

  &::backdrop {
    transition: backdrop-filter .5s ease;
  }

  &[loading] {
    visibility: hidden;
  }

  &[open] {
    @media (--motionOK) {
      animation: var(--animation-slide-in-up) forwards;
    }
  }

  & > form {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    max-block-size: 80vh;
    max-block-size: 80dvb;

    & > article {
      overflow-y: auto;
      max-block-size: 100%; /* safari */
      overscroll-behavior-y: contain;
      display: grid;
      justify-items: flex-start;
      gap: var(--size-3);
      box-shadow: var(--shadow-2);
      z-index: var(--layer-1);
      padding-inline: var(--size-5);
      padding-block: var(--size-3);

      @media (--OSlight) {
        background: var(--surface-1);

        &::-webkit-scrollbar {
          background: var(--surface-1);
        }
      }

      @media (--OSdark) {
        border-block-start: var(--border-size-1) solid var(--surface-3);
      }
    }

    & > header {
      display: flex;
      gap: var(--size-3);
      justify-content: space-between;
      align-items: flex-start;
      padding-block: var(--size-3);
      padding-inline: var(--size-5);

      & > button {
        border-radius: var(--radius-round);
        padding: .75ch;
        aspect-ratio: 1;
        flex-shrink: 0;
        place-items: center;
        stroke: currentColor;
        stroke-width: 3px;
      }
    }

    & > footer {
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-3);
      justify-content: space-between;
      align-items: flex-start;
      padding-inline: var(--size-5);
      padding-block: var(--size-3);

      & > menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-3);
        padding-inline-start: 0;

        &:only-child {
          margin-inline-start: auto;
        }

        @media (max-width: 410px) {
          & button[type="reset"] {
            display: none;
          }
        }
      }
    }

    & > :is(header, footer) {
      background-color: var(--surface-2);

      @media (--OSdark) {
        background-color: var(--surface-1);
      }
    }
  }
}

Open demo

This pattern shows how to create color-adaptive, responsive, and accessible mini and mega modals with the dialog element.

Full article · Video on YouTube · Source on Github

Learn more

Game Menu

<ul class="threeD-button-set">
  <li><button>New Game</button></li>
  <li><button>Continue</button></li>
  <li><button>Online</button></li>
  <li><button>Settings</button></li>
  <li><button>Quit</button></li>
</ul>

import {rovingIndex} from 'https://cdn.skypack.dev/roving-ux'
   
const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

rovingIndex({
  element: document.querySelector('.threeD-button-set'),
  target: 'button',
})

if (motionOK) {
  window.addEventListener('mousemove', ({target, clientX, clientY}) => {
    const {dx,dy} = getAngles(clientX, clientY)

    menu.style.setProperty('--x', `${dy / 20}deg`)
    menu.style.setProperty('--y', `${dx / 20}deg`)
  })
}

const getAngles = (clientX, clientY) => {
  const { x, y, width, height } = menuRect 
  
  const dx = clientX - (x + 0.5 * width)
  const dy = clientY - (y + 0.5 * height)
  
  return {dx,dy}
}

body {
  perspective: 40vw;
}

.threeD-button-set {
  --y:;
  --x:;
  --distance: 1px;
  --theme: hsl(180 100% 50%);
  --theme-bg: hsl(180 100% 50% / 25%);
  --theme-bg-hover: hsl(180 100% 50% / 40%);
  --theme-text: white;
  --theme-shadow: hsl(180 100% 10% / 25%);

  --_max-rotateY: 10deg;
  --_max-rotateX: 15deg;
  --_btn-bg: var(--theme-bg);
  --_btn-bg-hover: var(--theme-bg-hover);
  --_btn-text: var(--theme-text);
  --_btn-text-shadow: var(--theme-shadow);
  --_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);

  /* remove <ul> margins */
  margin: 0;

  /* vertical rag-right layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vh;
  
  /* create 3D space context */
  transform-style: preserve-3d;

  /* clamped menu rotation to not be too extreme */
  transform: 
    rotateY(
      clamp(
        calc(var(--_max-rotateY) * -1), 
        var(--y), 
        var(--_max-rotateY)
      )
    ) 
    rotateX(
      clamp(
        calc(var(--_max-rotateX) * -1), 
        var(--x), 
        var(--_max-rotateX)
      )
    )
  ;

  /* removes Safari focus ring on <ul> after button interaction */
  &:focus {
    outline: none;
  }
  
  @media (--motionOK) {
    will-change: transform;
    transition: transform .1s ease;
    animation: rotate-y 5s ease-in-out infinite;
  }

  @media (--dark) {
    --theme: hsl(255 53% 50%);
    --theme-bg: hsl(255 53% 71% / 25%);
    --theme-bg-hover: hsl(255 53% 50% / 40%);
    --theme-shadow: hsl(255 53% 10% / 25%);
  }

  @media (--HDcolor) {
    @supports (color: color(display-p3 0 0 0)) {
      --theme: color(display-p3 .4 0 .9);
    }
  }
}

.threeD-button-set > li {
  /* change display type from list-item */
  display: inline-flex;

  /* create context for button pseudos */
  position: relative;

  /* create 3D space context */
  transform-style: preserve-3d; 
}
  
.threeD-button-set button {
  /* strip out default button styles */
  appearance: none;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  
  /* bring in brand styles via props */
  background-color: var(--_btn-bg);
  color: var(--_btn-text);
  text-shadow: 0 1px 1px var(--_btn-text-shadow);

  font-size: min(5vmin, 3rem);
  font-family: Audiowide;
  padding-block: .75ch;
  padding-inline: 2ch;
  border-radius: 5px 20px;

  /* prepare for 3D perspective transforms */
  transform: translateZ(var(--distance));
  transform-style: preserve-3d;
  
  &:is(:hover, :focus-visible):not(:active) {
    /* subtle distance plus bg color change on hover/focus */
    --distance: 15px;
    background-color: var(--_btn-bg-hover);

    /* if motion is OK, setup transitions and increase distance */
    @media (--motionOK) {
      --distance: 3vmax;

      transition-timing-function: var(--_bounce-ease);
      transition-duration: .4s;

      &::after  { transition-duration: .5s }
      &::before { transition-duration: .3s }
    }
  }
  
  &::after,
  &::before {
    /* create empty element */
    content: '';
    opacity: .8;

    /* cover the parent (button) */
    position: absolute;
    inset: 0;

    /* style the element for border accents */
    border: 1px solid var(--theme);
    border-radius: 5px 20px;

    /* move in Z space with a multiplier */
    transform: translateZ(calc(var(--distance) / 3));

    /* if motion is OK, transition the Z space move */
    @media (--motionOK) {
      transition: transform .1s ease-out;   
    }
  }
  
  /* exceptions for one of the pseudo elements */
  /* this will be pushed back and have a thicker border */
  &::before {
    border-width: 3px;
    transform: translateZ(calc(var(--distance) / 3 * -1));

    /* in dark mode, it glows! */
    @media (--dark) {
      box-shadow: 
        0 0 25px var(--theme), 
        inset 0 0 25px var(--theme);
    }
  }
  
  @media (--motionOK) {
    will-change: transform;
    transition: 
      transform .2s ease,
      background-color .5s ease;
  }
}

@keyframes rotate-y {
  50% {
    transform: rotateY(15deg) rotateX(-6deg);
  }
}

Open demo

This pattern shows how to create a mouse and keyboard accessible 3D game menu.

Note: this component uses a library called roving-ux to create a focus group.

Full article · Video on YouTube · Source on Github

Learn more

Loading Bar

<main id="loading-zone" aria-busy="true">
  <p>Loading Level</p>
  <div class="card">
    <label>
      <span class="sr-only">Loading progress</span>
      <progress 
        indeterminate 
        role="progressbar" 
        aria-describedby="loading-zone"
        tabindex="-1"
      >unknown</progress>
    </label>
  </div>
</main>

const progress = document.querySelector('progress')
const zone     = document.querySelector('#loading-zone')

const state = {
  val: .1
}

const roundDecimals = (val, places) =>
  +(Math.round(val + "e+" + places)  + "e-" + places)

const setProgress = () => {
  // set loading zone status
  zone.setAttribute('aria-busy', state.val < 1)

  // clear attributes if no value to show
  // <progress> will show indeterminate state
  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  // round bad JS decimal math
  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"
  
  // set value for screenreaders and element values
  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent

  // focus so screenreaders hear the announced value update
  progress.focus()
}

progress {
  --_track: hsl(228 100% 90%);
  --_track-size: min(10px, 1ex);
  --_progress: hsl(228 100% 50%);
  --_radius: 1e3px;
  --_indeterminate-track: linear-gradient(to right,
    var(--_track) 45%,
    var(--_progress) 0%,
    var(--_progress) 55%,
    var(--_track) 0%
  );
  --_indeterminate-track-size: 225% 100%;
  --_indeterminate-track-animation: progress-loading 2s infinite ease;
  
  /*  reset  */
  appearance: none;
  border: none;
  
  /*  custom style  */
  position: relative;
  height: var(--_track-size);
  border-radius: var(--_radius);
  overflow: hidden;

  @media (prefers-color-scheme: dark) {
    --_track: hsl(228 20% 30%);
    --_progress: hsl(228 100% 75%);
  }

  &:focus-visible {
    outline-color: var(--_progress);
  }
  
  /*  Safari/Chromium  */
  &[value]::-webkit-progress-bar {
    background-color: var(--_track);
  }
  
  &[value]::-webkit-progress-value {
    background-color: var(--_progress);
    transition: inline-size .25s ease-out;
  }
  
  /*  Firefox  */
  &[value]::-moz-progress-bar {
    background-color: var(--_progress);
  }
  
  /*  indeterminate  */
  &:indeterminate::after {
    content: "";
    inset: 0;
    position: absolute;
    background: var(--_indeterminate-track);
    background-size: var(--_indeterminate-track-size);
    background-position: right; 
    animation: var(--_indeterminate-track-animation);
  }
  
  /*  indeterminate Safari  */
  &:indeterminate::-webkit-progress-bar {
    background: var(--_indeterminate-track);
    background-size: var(--_indeterminate-track-size);
    background-position: right; 
    animation: var(--_indeterminate-track-animation);
  }
  
  /*  indeterminate Firefox  */
  &:indeterminate::-moz-progress-bar {
    background: var(--_indeterminate-track);
    background-size: var(--_indeterminate-track-size);
    background-position: right; 
    animation: var(--_indeterminate-track-animation);
  }
  
  /*  complete  */
  &:not([max])[value="1"]::before,
  &[max="100"][value="100"]::before {
    content: "✓";
    
    position: absolute;
    inset-block: 0;
    inset-inline: auto 0;
    display: flex;
    align-items: center;
    padding-inline-end: max(calc(var(--_track-size) / 4), 3px);

    color: white;
    font-size: calc(var(--_track-size) / 1.25);
  }
}

@keyframes progress-loading {
  50% {
    background-position: left; 
  }
}

Open demo

This pattern shows how to build a color adaptive and accessible loading bar with the progress element.

Full article · Video on YouTube · Source on Github

Learn more

Media Scroller

<section>
  <header>
    <h2>Similar to Locke & Key</h2>
    <h3>Popular with similar viewers</h3>
  </header>

  <ul class="horizontal-media-scroller">
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?179">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?82">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?39">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?94">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?95">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?86">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?87">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?88">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?910">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?198">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?287">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?397">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?789">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?785">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?788">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?997">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?18">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?27">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?93">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?48">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?75">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?76">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?79">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?78">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?999">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?170">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?13">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?25">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?322">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?43">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?01">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?02">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?03">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?04">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?05">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?06">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?07">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?08">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?09">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?010">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?5">
      </picture>
      <figcaption>The Following</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?6">
      </picture>
      <figcaption>BERLIN STATION</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?7">
      </picture>
      <figcaption>Penny Dreadful</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?8">
      </picture>
      <figcaption>Castle Rock</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?9">
      </picture>
      <figcaption>The Walking Dead</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?10">
      </picture>
      <figcaption>Fear The Walking Dead</figcaption>
    </figure></a></li>

    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?1">
      </picture>
      <figcaption>Legends</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?2">
      </picture>
      <figcaption>The Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?3">
      </picture>
      <figcaption>Almost Family</figcaption>
    </figure></a></li>
    <li><a href="#"><figure>
      <picture>
        <img alt="A placeholder image" loading="lazy" src="https://picsum.photos/500/500?4">
      </picture>
      <figcaption>The Strain</figcaption>
    </figure></a></li>
    <li><a href="#"</