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_6a44f111b8a55563019124" id="sider_6a44f111b8a55563019124" data-uid="6a44f111b8a72" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111b8a55563019124">
    <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-uid="6a44f111b8bdf" 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-uid="6a44f111b8caf" 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-uid="6a44f111b5fe0" data-component=
      "slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b6cad" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b6dea" 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-uid="6a44f111b6e43" 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-uid=
          "6a44f111b6ede" 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-uid="6a44f111b70e5" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b7185" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b7258" 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-uid="6a44f111b72a7" 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-uid=
          "6a44f111b7303" 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-uid="6a44f111b73da" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b746b" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b7532" 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-uid="6a44f111b757c" 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-uid="6a44f111b75d6" 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-uid="6a44f111b7fd7" data-component="video"><source class=
        "c-video__source" src="#" type="video/mp4" /> <!-- notice.blade.php -->
        <div class="c-notice c-notice--warning" id="id_6a44f111b85e8" data-uid="6a44f111b85fe" data-component="notice" aria-labelledby="notice__text__id_6a44f111b85e8">
          <span id="notice__text__id_6a44f111b85e8" 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-uid="6a44f111b8672" 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-uid="6a44f111b87ba" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b8887" 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-uid="6a44f111b88d5" 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-uid="6a44f111b8932" 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-uid="6a44f111b8982" 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-uid="6a44f111b89ca" 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_6a44f111b9533676409929" id="sider_6a44f111b9533676409929" data-uid="6a44f111b9546" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111b9533676409929">
    <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-uid="6a44f111b95c5" 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-uid="6a44f111b9689" 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-uid="6a44f111b932e" data-component=
      "slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b93ce" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/720/720" alt="" />
          </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-uid="6a44f111b949e" 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-uid="6a44f111b94eb" 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_6a44f111ba88c947265651" id="sider_6a44f111ba88c947265651" data-uid="6a44f111ba89f" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111ba88c947265651">
    <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-uid="6a44f111ba91d" 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-uid="6a44f111ba9d3" 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-uid=
      "6a44f111b9be6" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b9c89" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b9d58" 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-uid="6a44f111b9da6" 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-uid="6a44f111b9e03" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111b9ea5" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111b9f6f" 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-uid="6a44f111b9fb9" 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-uid="6a44f111ba014" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111ba0bc" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111ba17c" 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-uid="6a44f111ba1c6" 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-uid="6a44f111ba22a" 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-uid="6a44f111ba2cc" data-component="video"><source class=
        "c-video__source" src="#" type="video/mp4" /> <!-- notice.blade.php -->
        <div class="c-notice c-notice--warning" id="id_6a44f111ba375" data-uid="6a44f111ba386" data-component="notice" aria-labelledby="notice__text__id_6a44f111ba375">
          <span id="notice__text__id_6a44f111ba375" 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-uid="6a44f111ba3ef" 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-uid="6a44f111ba4f3" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111ba5bb" 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-uid="6a44f111ba646" 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-uid="6a44f111ba6a8" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111ba738" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111ba7fb" 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-uid="6a44f111ba844" 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_6a44f111bb344872549596" id="sider_6a44f111bb344872549596" data-uid="6a44f111bb356" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111bb344872549596">
    <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-uid="6a44f111bb3d3" 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-uid="6a44f111bb494" 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-uid="6a44f111baf3a" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111bafda" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111bb0a8" 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-uid="6a44f111bb0f6" 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-uid="6a44f111bb150" data-component="slider__item">
        <!-- image.blade.php -->
        <figure class="c-image c-slider__item__image c-image--cover" data-uid="6a44f111bb1ec" data-component="image">
          <div class="c-image__image-wrapper">
            <img loading="lazy" class="c-image__image" src="https://picsum.photos/1080/720" alt="" />
          </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-uid="6a44f111bb2b2" 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-uid="6a44f111bb2fc" 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_6a44f111cd559260261918" id="sider_6a44f111cd559260261918" data-uid="6a44f111cd570" data-component="slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111cd559260261918">
    <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-uid="6a44f111cd5fa" 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-uid="6a44f111cd6d1" 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-uid="6a44f111bcccc" 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-uid=
          "6a44f111bc7c4" data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-uid="6a44f111bc9ca" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-uid="6a44f111bc88b" data-component="image">
                <div class="c-image__image-wrapper">
                  <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/0/267" alt="ALT" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-uid="6a44f111bcc65" 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-uid="6a44f111bcb62" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-uid="6a44f111bcb10" 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-uid="6a44f111bca85" 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-uid="6a44f111bcbdf" 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-uid="6a44f111cccb3" 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-uid=
          "6a44f111cc805" data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-uid="6a44f111cca17" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-uid="6a44f111cc93f" data-component="image">
                <div class="c-image__image-wrapper">
                  <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/1/267" alt="ALT" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-uid="6a44f111ccc47" 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-uid="6a44f111ccb7d" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-uid="6a44f111ccb2d" 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-uid="6a44f111ccac7" 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-uid="6a44f111ccbf6" 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-uid="6a44f111cd0f6" 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-uid=
          "6a44f111ccd3f" data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-uid="6a44f111cce87" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-uid="6a44f111ccdd6" data-component="image">
                <div class="c-image__image-wrapper">
                  <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/2/267" alt="ALT" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-uid="6a44f111cd090" 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-uid="6a44f111ccfd5" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-uid="6a44f111ccf8c" 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-uid="6a44f111ccf3f" 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-uid="6a44f111cd046" 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-uid="6a44f111cd4fe" 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-uid=
          "6a44f111cd167" data-component="card">
          <div class="c-card__paint-container">
            <div class="c-card__image-container" data-uid="6a44f111cd2a3" data-component="card__image">
              <!-- image.blade.php -->
              <figure class="c-image c-card__image c-image--cover" data-uid="6a44f111cd1fb" data-component="image">
                <div class="c-image__image-wrapper">
                  <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/3/267" alt="ALT" />
                </div>
              </figure>
            </div>
            <div class="c-card__body" data-uid="6a44f111cd4a2" 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-uid="6a44f111cd3e9" data-component="group">
                <!-- group.blade.php -->
                <div class="c-group c-group--vertical" data-uid="6a44f111cd39f" 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-uid="6a44f111cd346" 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-uid="6a44f111cd458" 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_6a44f111e527f158555279" id="sider_6a44f111e527f158555279" data-uid="6a44f111e52a6" data-component=
"slider">
  <div class="c-slider__arrows" id="slider_sider_6a44f111e527f158555279">
    <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-uid="6a44f111e532d" 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-uid="6a44f111e53eb" 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-uid="6a44f111d11c2" 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-uid="6a44f111d0c1d" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label="Visit: https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d0dd5" data-component=
            "link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-uid="6a44f111d0cc3" data-component="image">
              <div class="c-image__image-wrapper">
                <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/0/1400" alt="" />
              </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-uid="6a44f111d114c" 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-uid="6a44f111d1015" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-uid="6a44f111d0fc4" 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-uid="6a44f111d0f71" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d0f17" 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-uid="6a44f111d1060" 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-uid="6a44f111d10bf"
                    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-uid="6a44f111d1752" 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-uid="6a44f111d1233" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label="Visit: https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d1370" data-component=
            "link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-uid="6a44f111d12b3" data-component="image">
              <div class="c-image__image-wrapper">
                <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/1/1400" alt="" />
              </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-uid="6a44f111d16df" 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-uid="6a44f111d14fa" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-uid="6a44f111d14b1" 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-uid="6a44f111d1465" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d1417" 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-uid="6a44f111d15a9" 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-uid="6a44f111d164f"
                    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-uid="6a44f111d5055" 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-uid="6a44f111d17c4" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label="Visit: https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d191f" data-component=
            "link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-uid="6a44f111d1844" data-component="image">
              <div class="c-image__image-wrapper">
                <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/2/1400" alt="" />
              </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-uid="6a44f111d4f90" 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-uid="6a44f111d4d9e" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-uid="6a44f111d4d21" 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-uid="6a44f111d4c97" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d4bf1" 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-uid="6a44f111d4e19" 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-uid="6a44f111d4eb6"
                    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-uid="6a44f111e5221" 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-uid="6a44f111d511d" data-component="segment">
            <a class="c-link c-segment__image-container" aria-label="Visit: https://www.getmunicipio.com" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111d532e" data-component=
            "link"><!-- image.blade.php -->
            <figure class="c-image c-segment__image" data-uid="6a44f111d51f0" data-component="image">
              <div class="c-image__image-wrapper">
                <img loading="lazy" class="c-image__image" src="https://picsum.photos/seed/3/1400" alt="" />
              </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-uid="6a44f111e519c" 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-uid="6a44f111e5042" data-component="group">
                    <!-- group.blade.php -->
                    <div class="c-group u-width--100 c-group--vertical" data-uid="6a44f111e4ff1" 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-uid="6a44f111e4f8a" data-component="typography">
                        <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="6a44f111e4f02" 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-uid="6a44f111e5090" 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-uid="6a44f111e50fb"
                    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	Description
autoSlide	true	If set to true, slider will auto slide with default delay. Can also receive an int to set delay in seconds
peekSlides	false	Adds some padding to show a peek of next and previous slides
navigationHover	true	Only show navigation when hovering over the slider
ratio	16:9	The size ratio of the slider
repeatSlide	true	Will allow the slide to repeat its cycle
type	slide	-
heroStyle	false	-
shadow	true	-
customButtons	false	False will use default buttons, otherwise pass a string of the value of data-js-slider-buttons
arrowButtons	[]	-
padding	0	Sets the amount of padding between slides
gap	2	Sets the amount of gap between slides

Subcomponents

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

Slider Item

Blade directive: @slider__item()

A title for predefined layout

Parameter	Default	Type	Purpose
title		string\|boolean	A title for predefined layout
text		string\|boolean	A text for predefined layout
cta	[]	array\|boolean	Adds button with a link, should conform with the button component specification (title, href)
image	false	boolean\|string\|ImageInterface	An url or path to an image to use as background for the segment
video	false	boolean\|string	A video background for the segment
alt		string	Alternative text
link	false	string\|boolean	Where the slide should link to
linkDescription		string	A description of the link
layout	bottom	string	Which layouts to use
theme	base	string	The color palette to be used
containerColor		string	Determines what color the container and text should be
heroStyle	false	string	Gives the slide a hero like appearance with larger text
textAlignment		string	Aligns the text in the container
overlay	none	string	Adds an overlay to the image
slot	false	boolean\|string	A slot for custom content, placed above the predefined layout
bottom	false	boolean\|string	A slot for custom content, placed below the predefined layout
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