Municipio Styleguide

Slider

The Slider component provides a reusable pattern for slider in the interface.

Using the slider item component

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-type="loop"
data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfcceb8867012892" id="sider_6aaf3cbfcceb8867012892" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfcceb8867012892">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left"
    type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php (promoted) (hasSeenH1)  original: h2 -->
          <h1 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h1><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p><a class="c-button c-slider__item__cta c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read more" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Read more</span></span></a>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-bottom c-slider__item--overlay-none" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p><a class="c-button c-slider__item__cta c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read more" data-component=
          "button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Read more</span></span></a>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--layout-center c-slider__item--overlay-light" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--lightest c-slider__item--layout-bottom c-slider__item--overlay-none" data-js-slider-video=
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" data-component="slider__item">
        <!-- video.blade.php -->
         <video class="c-video c-slider__item__background--video" width="600" height="300" muted="muted" autoplay="" loop="1" data-component="video"><source class="c-video__source" src="#" type=
        "video/mp4" /> <!-- notice.blade.php -->
        <div class="c-notice c-notice--warning" id="id_6aaf3cbfcc5da" data-component="notice" aria-labelledby="notice__text__id_6aaf3cbfcc5da">
          <span id="notice__text__id_6aaf3cbfcc5da" data-js-notice-message="true" class="c-notice__message">This component is not supported by your browser.</span>
        </div></video> <!-- Play/pause button -->
         <button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" js-video-control="" aria-label=
        "play_arrow" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
         </span></span></button> <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-center c-slider__item--overlay-none" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'darkest',
        'image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true,
        'cta' => [
            'title' => 'Read more',
            'href' => 'https://www.getmunicipio.com',
        ]
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'darkest',
        'image' => 'https://picsum.photos/1080/720',
        'cta' => [
            'title' => 'Read more',
            'href' => 'https://www.getmunicipio.com',
        ]
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'transparent',
        'image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'lightest',
        'image' => 'https://picsum.photos/1080/720',
        'video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'containerColor' => 'darkest',
        'layout' => 'center',
    ])
    @endslider__item
@endslider

Single slide

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-type="loop"
data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfcd886782261541" id="sider_6aaf3cbfcd886782261541" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfcd886782261541">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left"
    type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/720/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'transparent',
        'image' => 'https://picsum.photos/720/720',
        'heroStyle' => true
    ])
    @endslider__item
@endslider

Repeat slide

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-type="loop"
data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfd27ac938795977" id="sider_6aaf3cbfd27ac938795977" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfd27ac938795977">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left"
    type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--none c-slider__item--text-align-center c-slider__item--layout-center c-slider__item--overlay-dark c-slider__item--hero" data-component=
      "slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--theme c-slider__item--layout-bottom c-slider__item--overlay-light" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--none c-slider__item--layout-center c-slider__item--overlay-light" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--white c-slider__item--layout-bottom c-slider__item--overlay-none" data-js-slider-video=
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" data-component="slider__item">
        <!-- video.blade.php -->
         <video class="c-video c-slider__item__background--video" width="600" height="300" muted="muted" autoplay="" loop="1" data-component="video"><source class="c-video__source" src="#" type=
        "video/mp4" /> <!-- notice.blade.php -->
        <div class="c-notice c-notice--warning" id="id_6aaf3cbfd1e3a" data-component="notice" aria-labelledby="notice__text__id_6aaf3cbfd1e3a">
          <span id="notice__text__id_6aaf3cbfd1e3a" data-js-notice-message="true" class="c-notice__message">This component is not supported by your browser.</span>
        </div></video> <!-- Play/pause button -->
         <button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" js-video-control="" aria-label=
        "play_arrow" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
         </span></span></button> <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--white c-slider__item--layout-center c-slider__item--overlay-none" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
    'repeatSlide' => true,
])
    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'none',
        'overlay' => 'dark',
        'textAlignment' => 'center',
        'image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'overlay' => 'light',
        'containerColor' => 'theme',
        'image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'none',
        'image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',   
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'white',
        'image' => 'https://picsum.photos/1080/720',
        'video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'containerColor' => 'white',
        'layout' => 'center',
        'image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item
@endslider

Button styling

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-type="loop"
data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfd3510564979677" id="sider_6aaf3cbfd3510564979677" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfd3510564979677">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label=
    "keyboard_arrow_left" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-center c-slider__item--overlay-none" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-bottom c-slider__item--overlay-none" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-component="image">
          <div class="c-image__image-wrapper">
            <img class="c-image__image" src="https://picsum.photos/1080/720" alt="" loading="lazy" />
          </div>
        </figure>
        <div class="c-slider__item__container">
          <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
          <h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-component="typography">
            Base Layout
          </h2><!-- typography.blade.php  (hasSeenH1)  original: p -->
          <p class="c-typography c-slider__item__body c-typography__variant--body" data-component="typography">
            Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
          </p>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
    'arrowButtons' => array("color" => "secondary", "style" => "filled")
])
    @slider__item([
        'image' => 'https://picsum.photos/1080/720',
        'title' => 'Base Layout',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'darkest'
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'image' => 'https://picsum.photos/1080/720',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'darkest'
    ])
    @endslider__item
@endslider

Slider with Cards

<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="4" data-step="0" data-js-slider="0" data-js-slider-index="0"
data-slider-type="loop" data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfd804f352295255" id="sider_6aaf3cbfd804f352295255" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfd804f352295255">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left"
    type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- card.blade.php -->
           <a class="c-card u-color__text--info c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.getmunicipio.com" aria-label="Card #0 - Lorem ipsum dolor sit amet,"
          data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-component="image">
                <div class="c-image__image-wrapper">
                  <img class="c-image__image" src="https://picsum.photos/seed/0/267" alt="ALT" loading="lazy" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-component="card__body">
              <!-- group.blade.php -->
              <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-component="group">
                  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                  <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                    Card #0
                  </h2>
                </div>
              </div><!-- typography.blade.php  (hasSeenH1)  original: p -->
              <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
            </div>
          </div></a>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- card.blade.php -->
           <a class="c-card u-color__text--info c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.getmunicipio.com" aria-label="Card #1 - Lorem ipsum dolor sit amet,"
          data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-component="image">
                <div class="c-image__image-wrapper">
                  <img class="c-image__image" src="https://picsum.photos/seed/1/267" alt="ALT" loading="lazy" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-component="card__body">
              <!-- group.blade.php -->
              <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-component="group">
                  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                  <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                    Card #1
                  </h2>
                </div>
              </div><!-- typography.blade.php  (hasSeenH1)  original: p -->
              <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
            </div>
          </div></a>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- card.blade.php -->
           <a class="c-card u-color__text--info c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.getmunicipio.com" aria-label="Card #2 - Lorem ipsum dolor sit amet,"
          data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-component="image">
                <div class="c-image__image-wrapper">
                  <img class="c-image__image" src="https://picsum.photos/seed/2/267" alt="ALT" loading="lazy" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-component="card__body">
              <!-- group.blade.php -->
              <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-component="group">
                  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                  <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                    Card #2
                  </h2>
                </div>
              </div><!-- typography.blade.php  (hasSeenH1)  original: p -->
              <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
            </div>
          </div></a>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- card.blade.php -->
           <a class="c-card u-color__text--info c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.getmunicipio.com" aria-label="Card #3 - Lorem ipsum dolor sit amet,"
          data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-component="image">
                <div class="c-image__image-wrapper">
                  <img class="c-image__image" src="https://picsum.photos/seed/3/267" alt="ALT" loading="lazy" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-component="card__body">
              <!-- group.blade.php -->
              <div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-component="group">
                  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                  <h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-component="typography">
                    Card #3
                  </h2>
                </div>
              </div><!-- typography.blade.php  (hasSeenH1)  original: p -->
              <p class="c-typography c-card__content c-typography__variant--p" data-component="typography">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
            </div>
          </div></a>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
    'attributeList' => [
        'data-slides-per-page' => 4
    ],
])

    @for ($i = 0; $i < 4; $i++)
    
        @slider__item([
            'layout' => 'center',
            'heroStyle' => false,
            'classList' => ['c-slider__item--post']
        ])

            @card([
                'link' => 'https://www.getmunicipio.com',
                'image' => ['src' => "https://picsum.photos/seed/$i/267", 'alt' => 'ALT'],
                'heading' => "Card #$i",
                'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                'classList' => ['u-color__text--info'],
            ])
            @endcard

        @endslider__item

    @endfor

@endslider

Slider with Segment

<div class="c-slider c-slider--post splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="1" data-step="0" data-js-slider="0"
data-js-slider-index="0" data-slider-type="slide" data-slider-gap="2" data-js-slider-buttons="sider_6aaf3cbfe8421427276695" id="sider_6aaf3cbfe8421427276695" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6aaf3cbfe8421427276695">
    <button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left"
    type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1"
    aria-label="keyboard_arrow_right" type="button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
     </span></span></button>
  </div>
  <div class="c-slider__container splide__track">
    <div class="c-slider__inner splide__list" data-js-slider-inner="">
      <!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- segment.blade.php -->
          <section class=
          "c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse"
          data-observe-resizes="" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label=": https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-component="image">
              <div class="c-image__image-wrapper">
                <img class="c-image__image" src="https://picsum.photos/seed/0/1400" alt="" loading="lazy" />
              </div>
            </figure></a>
            <div class="c-segment__content">
              <!-- card.blade.php -->
              <div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
                <div class="c-card__paint-container">
                  <!-- group.blade.php -->
                  <div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-component="group">
                      <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                      <h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-component="link">Card #0</a>
                      </h2>
                    </div>
                  </div><!-- typography.blade.php  (hasSeenH1)  original: div -->
                  <div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                  </div>
                  <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read More" data-component=
                    "button"><span class="c-button__label"><span class="c-button__label-text">Read More</span></span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- segment.blade.php -->
          <section class=
          "c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse"
          data-observe-resizes="" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label=": https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-component="image">
              <div class="c-image__image-wrapper">
                <img class="c-image__image" src="https://picsum.photos/seed/1/1400" alt="" loading="lazy" />
              </div>
            </figure></a>
            <div class="c-segment__content">
              <!-- card.blade.php -->
              <div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
                <div class="c-card__paint-container">
                  <!-- group.blade.php -->
                  <div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-component="group">
                      <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                      <h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-component="link">Card #1</a>
                      </h2>
                    </div>
                  </div><!-- typography.blade.php  (hasSeenH1)  original: div -->
                  <div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                  </div>
                  <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read More" data-component=
                    "button"><span class="c-button__label"><span class="c-button__label-text">Read More</span></span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- segment.blade.php -->
          <section class=
          "c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse"
          data-observe-resizes="" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label=": https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-component="image">
              <div class="c-image__image-wrapper">
                <img class="c-image__image" src="https://picsum.photos/seed/2/1400" alt="" loading="lazy" />
              </div>
            </figure></a>
            <div class="c-segment__content">
              <!-- card.blade.php -->
              <div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
                <div class="c-card__paint-container">
                  <!-- group.blade.php -->
                  <div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-component="group">
                      <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                      <h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-component="link">Card #2</a>
                      </h2>
                    </div>
                  </div><!-- typography.blade.php  (hasSeenH1)  original: div -->
                  <div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                  </div>
                  <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read More" data-component=
                    "button"><span class="c-button__label"><span class="c-button__label-text">Read More</span></span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section><!-- slider__item.blade.php -->
      <section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" data-component="slider__item">
        <div class="c-slider__item__container">
          <!-- segment.blade.php -->
          <section class=
          "c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse"
          data-observe-resizes="" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label=": https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-component="link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-component="image">
              <div class="c-image__image-wrapper">
                <img class="c-image__image" src="https://picsum.photos/seed/3/1400" alt="" loading="lazy" />
              </div>
            </figure></a>
            <div class="c-segment__content">
              <!-- card.blade.php -->
              <div class="c-card c-segment__content-card c-card--ratio-16-9" data-component="card">
                <div class="c-card__paint-container">
                  <!-- group.blade.php -->
                  <div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-component="group">
                      <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
                      <h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-component="link">Card #3</a>
                      </h2>
                    </div>
                  </div><!-- typography.blade.php  (hasSeenH1)  original: div -->
                  <div class="c-typography c-segment__text c-typography__variant--div" data-component="typography">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                  </div>
                  <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" href="https://www.getmunicipio.com" target="_top" aria-label="Read More" data-component=
                    "button"><span class="c-button__label"><span class="c-button__label-text">Read More</span></span></a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </section>
    </div>
  </div>
</div>

@slider([
    'autoSlide' => false,
    'repeatSlide' => false,
    'attributeList' => [
        'data-slides-per-page' => 1
    ],
    'classList' => ['c-slider--post']
])

    @for ($i = 0; $i < 4; $i++)
    
        @slider__item([
            'classList' => ['c-slider__item--post']
        ])

            @segment([
                'layout' => 'card',
                'title' => "Card #$i",
                'tags' => false,
                'meta' => false,
                'image' => "https://picsum.photos/seed/$i/1400",
                'buttons' => [['text' => 'Read More', 'href' => 'https://www.getmunicipio.com']],
                'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                'classList' => ['c-segment--slider', 'c-segment--size-sm'],
                'containerAware' => true,
                'reverseColumns' => true
            ])
            @endsegment

        @endslider__item

    @endfor

@endslider

API

Parameter	Default	Type	Description
autoSlide	true	integer\|boolean\|null	-
peekSlides	false	boolean	-
navigationHover	true	boolean	-
ratio	16:9	string	-
repeatSlide	true	boolean	-
type	slide	string	-
heroStyle	false	boolean	-
shadow	true	boolean	-
customButtons	false	string\|boolean	-
arrowButtons	[]	array	-
padding	0	integer	-
gap	2	integer	-

Subcomponents

Child components for slider, including purpose and supported Blade parameters.

Slider Item

Blade directive: @slider__item()

Parameter	Default	Type	Purpose
title		string\|boolean	-
text		string\|boolean	-
cta	[]	array\|boolean	-
image	false	ComponentLibrary\Integrations\Image\ImageInterface\|string\|boolean	-
video	false	string\|boolean	-
alt		?string	-
link	false	string\|boolean	-
linkDescription		string	-
layout	bottom	string	-
theme	base	string	-
containerColor		string	-
heroStyle	false	string\|boolean	-
textAlignment		string	-
overlay	none	string	-
slot		Illuminate\Support\HtmlString\|Illuminate\View\ComponentSlot\|string\|null	-
bottom	false	string\|boolean	-
classList	[]	array	Additional CSS classes added to the wrapping element.
attributeList	[]	array	Additional HTML attributes added to the wrapping element.

@slider__item([
    'title' => '',
    'text' => '',
    'cta' => [],
    'image' => false,
    'video' => false,
    'alt' => '',
    'link' => false,
    'linkDescription' => '',
    'layout' => 'bottom',
    'theme' => 'base',
    'containerColor' => '',
    'heroStyle' => false,
    'textAlignment' => '',
    'overlay' => 'none',
    'bottom' => false,
])
    Slot content
@endslider__item

CSS API

Variable	Default	Type	Values	Description
--c-slider--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-slider--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-slider--border-radius	var(--border-radius)	range	-	Border Radius
--c-slider--color--primary	var(--color--primary)	color	-	Primary
--c-slider--color--alpha	var(--color--alpha)	rgba	-	Used for overlays. Includes opacity — set both color and alpha together.
--c-slider--font-family-heading	var(--font-family-heading)	font	-	Falls back to body font if not set.
--c-slider--font-family-base	var(--font-family-base)	font	-	Body Font
--c-slider--font-size-100	var(--font-size-100)	range	-	Base font size.
--c-slider--color--alpha-contrast	var(--color--alpha-contrast)	color	-	Used for text and icons on alpha overlays.
--c-slider--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-slider--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.

Similar components

Sidebar Loader Divider