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 c-slider--has-stepper" 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_69f0d123e25f6049189022" id="sider_69f0d123e25f6049189022" data-uid="69f0d123e260c" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e25f6049189022">
        <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="69f0d123e267f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e26c4" data-component="icon">
                    </span>
            </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="69f0d123e271a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e2757" data-component="icon">
                    </span>
            </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="69f0d123e1727" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e17fc" 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="69f0d123e18ef" 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="69f0d123e1937" 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="69f0d123e19b3" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="arrow_forward" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e1b34" data-component="icon">
                    </span>
            </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="69f0d123e1bb0" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e1c20" 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="69f0d123e1cc4" 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="69f0d123e1cfe" 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="69f0d123e1d43" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="arrow_forward" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e1d87" data-component="icon">
                    </span>
            </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="69f0d123e1ddc" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e1e2b" 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="69f0d123e1ea4" 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="69f0d123e1edb" 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="69f0d123e1f1d" data-component="slider__item">
    
    
    

    
    <!-- video.blade.php -->
    <video class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="69f0d123e2273" data-component="video">

                                    <source class="c-video__source" src="#" type="video/mp4">
                            
                        <!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_69f0d123e2312" data-uid="69f0d123e2325" data-component="notice" aria-labelledby="notice__text__id_69f0d123e2312">
    
    
        
    
    
    
            <span id="notice__text__id_69f0d123e2312" 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="69f0d123e237b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="play_arrow" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e23be" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>    <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e2422" 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="69f0d123e249f" 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="69f0d123e24d5" 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="69f0d123e2519" 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="69f0d123e2552" 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="69f0d123e2584" 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 c-slider--has-stepper" 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_69f0d123e2cab685038094" id="sider_69f0d123e2cab685038094" data-uid="69f0d123e2cbe" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e2cab685038094">
        <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="69f0d123e2d1b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e2d5d" data-component="icon">
                    </span>
            </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="69f0d123e2da9" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e2de5" data-component="icon">
                    </span>
            </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="69f0d123e2b4b" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e2bb4" 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="69f0d123e2c3c" 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="69f0d123e2c77" 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 c-slider--has-stepper" 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_69f0d123e3ade544209418" id="sider_69f0d123e3ade544209418" data-uid="69f0d123e3af0" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e3ade544209418">
        <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="69f0d123e3b48" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e3b89" data-component="icon">
                    </span>
            </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="69f0d123e3bd2" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e3c0d" data-component="icon">
                    </span>
            </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="69f0d123e32ef" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e336d" 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="69f0d123e33f6" 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="69f0d123e342f" 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="69f0d123e3475" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e34c5" 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="69f0d123e353d" 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="69f0d123e3572" 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="69f0d123e35b4" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e3601" 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="69f0d123e3677" 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="69f0d123e36ba" 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="69f0d123e36fc" data-component="slider__item">
    
    
    

    
    <!-- video.blade.php -->
    <video class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="69f0d123e3749" data-component="video">

                                    <source class="c-video__source" src="#" type="video/mp4">
                            
                        <!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_69f0d123e3789" data-uid="69f0d123e3797" data-component="notice" aria-labelledby="notice__text__id_69f0d123e3789">
    
    
        
    
    
    
            <span id="notice__text__id_69f0d123e3789" 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="69f0d123e37e0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="play_arrow" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e3822" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>    <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e3880" 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="69f0d123e3910" 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="69f0d123e395b" 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="69f0d123e39a3" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e39f2" 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="69f0d123e3a69" 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="69f0d123e3aa9" 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 c-slider--has-stepper" 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_69f0d123e42c2427193449" id="sider_69f0d123e42c2427193449" data-uid="69f0d123e42d2" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e42c2427193449">
        <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="69f0d123e433d" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e4384" data-component="icon">
                    </span>
            </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="69f0d123e43d2" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e440f" data-component="icon">
                    </span>
            </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="69f0d123e401c" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e4083" 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="69f0d123e410b" 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="69f0d123e4144" 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="69f0d123e418a" data-component="slider__item">
    
    
    

    
        <!-- image.blade.php -->
    <figure class="c-image c-slider__item__image c-image--cover" data-uid="69f0d123e41d8" 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="69f0d123e425a" 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="69f0d123e4290" 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 c-slider--has-stepper" 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_69f0d123e5288810641859" id="sider_69f0d123e5288810641859" data-uid="69f0d123e5298" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e5288810641859">
        <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="69f0d123e52f0" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e5331" data-component="icon">
                    </span>
            </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="69f0d123e537a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e53b5" data-component="icon">
                    </span>
            </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="69f0d123e4b1c" 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="69f0d123e4851" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d123e48e6" 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">
                <!-- 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="69f0d123e4a6f" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d123e4a2d" 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="69f0d123e49b5" 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="69f0d123e4acc" 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="69f0d123e4d8a" 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="69f0d123e4b6d" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d123e4bd3" 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">
                <!-- 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="69f0d123e4ce8" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d123e4cac" 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="69f0d123e4c75" 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="69f0d123e4d3e" 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="69f0d123e4ff9" 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="69f0d123e4dd7" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d123e4e48" 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">
                <!-- 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="69f0d123e4f65" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d123e4f31" 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="69f0d123e4ef9" 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="69f0d123e4fae" 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="69f0d123e5251" 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="69f0d123e5044" data-component="card">
    <div class="c-card__paint-container">
        <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--cover" data-uid="69f0d123e50a6" 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">
                <!-- 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="69f0d123e51ad" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d123e517a" 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="69f0d123e5146" 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="69f0d123e5203" 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 c-slider--has-stepper" 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_69f0d123e6605073015720" id="sider_69f0d123e6605073015720" data-uid="69f0d123e6616" data-component="slider">
    <div class="c-slider__arrows" id="slider_sider_69f0d123e6605073015720">
        <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="69f0d123e666e" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e66b2" data-component="icon">
                    </span>
            </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="69f0d123e671a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d123e675c" data-component="icon">
                    </span>
            </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="69f0d123e5c1a" 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="69f0d123e585d" 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="69f0d123e598f" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d123e58d9" 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="69f0d123e5bce" 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="69f0d123e5ae7" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d123e5ab0" 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="69f0d123e5a76" data-component="typography">
    <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="69f0d123e5a3a" 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="69f0d123e5b25" 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="69f0d123e5b7f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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="69f0d123e5f99" 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="69f0d123e5c70" 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="69f0d123e5d5f" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d123e5cdd" 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="69f0d123e5f50" 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="69f0d123e5e90" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d123e5e5c" 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="69f0d123e5e14" data-component="typography">
    <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="69f0d123e5dd4" 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="69f0d123e5ec3" 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="69f0d123e5f06" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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="69f0d123e62b8" 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="69f0d123e5fec" 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="69f0d123e60b0" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d123e603d" 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="69f0d123e6272" 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="69f0d123e61b8" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d123e617b" 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="69f0d123e6148" data-component="typography">
    <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="69f0d123e6114" 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="69f0d123e61ea" 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="69f0d123e622c" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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="69f0d123e65cc" 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="69f0d123e630a" 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="69f0d123e63c9" data-component="link">
        <!-- image.blade.php -->
    <figure class="c-image c-segment__image" data-uid="69f0d123e6359" 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="69f0d123e6585" 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="69f0d123e64c3" data-component="group">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69f0d123e6492" 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="69f0d123e6460" data-component="typography">
    <a class="c-link" href="https://www.getmunicipio.com" target="_top" data-uid="69f0d123e642d" 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="69f0d123e64f4" 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="69f0d123e6535" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <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
showStepper	true	Option to hide or show stepper.
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

CSS API

Variable	Default	Type	Values	Description
--c-slider--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--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