Slider

Different Sizes

Card is based on a paper component

This is a default colored button and it's pretty sweet

Base Layout

Base Layout

Base Layout

Base Layout

<div id="62becf196d5791.99066650" class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" js-slider-repeat="" data-uid="62becf196d5ab">
    <div class="splide__arrows c-slider__arrows">
        <button id="62becf196dacc" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196dac5">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196dbaf" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196dba9">
                    keyboard_arrow_left
            </i>
            </span>
        
        
    </span>
</button>        <button id="62becf196dc1e" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196dc19">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196dc67" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196dc63">
                    keyboard_arrow_right
            </i>
            </span>
        
        
    </span>
</button>    </div>
    <div class="c-slider__container splide__track">
        <div class="c-slider__inner splide__list" js-slider-inner>
            <!-- segment.blade.php -->
<section id="62becf196cc34" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196cc31">
    
    <div class="c-segment__content o-container o-container--content o-container--keep-spacing">
    
                    <div class="c-segment__padder">
                
                                    <!-- typography.blade.php (promoted) -->
<h1 id="62becf196ccf9" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196ccf5">
    Base Layout
</h1>                
                
                
                
                
            </div>
        
    </div>
    
    
        
</section>
    <!-- segment.blade.php -->
<section id="62becf196ce8a" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196ce86">
    
    <div class="c-segment__content o-container o-container--content o-container--keep-spacing">
    
                    <div class="c-segment__padder">
                
                                    <!-- typography.blade.php  -->
<h2 id="62becf196cee5" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196cee2">
    Base Layout
</h2>                
                
                
                
                
            </div>
        
    </div>
    
    
        
</section>
    <!-- segment.blade.php -->
<section id="62becf196d021" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196d01e">
    
    <div class="c-segment__content o-container o-container--content o-container--keep-spacing">
    
                    <div class="c-segment__padder">
                
                                    <!-- typography.blade.php  -->
<h2 id="62becf196d066" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196d063">
    Base Layout
</h2>                
                
                
                
                
            </div>
        
    </div>
    
    
        
</section>
    <!-- segment.blade.php -->
<section id="62becf196d1a8" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196d1a5">
    
    <div class="c-segment__content o-container o-container--content o-container--keep-spacing">
    
                    <div class="c-segment__padder">
                
                                    <!-- typography.blade.php  -->
<h2 id="62becf196d203" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196d1fe">
    Base Layout
</h2>                
                
                
                
                
            </div>
        
    </div>
    
    
        
</section>
        </div>
    </div>

    </div>
@slider([
    'showStepper' => true,
    'autoSlide' => false,
])
    @segment([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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' => 'left',
        'containerColor' => 'tertiary',
        'background_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium',
        'classList' => [
            'splide__slide'
        ]
    ])
    
        @slot('bottom')
            @button([
                'text' => 'Primary filled',
                'color' => 'primary',
                'type' => 'filled'
    
            ])
            @endbutton
    
            @button([
                'text' => 'Secondary filled',
                'color' => 'secondary',
                'type' => 'filled'
    
            ])
            @endbutton
    
            @button([
                'text' => 'Default filled',
                'color' => 'default',
                'type' => 'filled'
            ])
            @endbutton
        @endslot
    @endsegment

    @segment([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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' => 'left',
        'containerColor' => 'tertiary',
        'background_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium',
        'classList' => [
            'splide__slide'
        ]
    ])

        @slot('bottom')
            @button([
                'text' => 'Primary filled',
                'color' => 'primary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Secondary filled',
                'color' => 'secondary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Default filled',
                'color' => 'default',
                'type' => 'filled'
            ])
            @endbutton
        @endslot
    @endsegment

    @segment([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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' => 'left',
        'containerColor' => 'tertiary',
        'background_image' => 'https://picsum.photos/1080/720',
        'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        'overlay' => 'light',
        'overlay_opacity' => 'medium',
        'classList' => [
            'splide__slide'
        ]
    ])

        @slot('bottom')
            @button([
                'text' => 'Primary filled',
                'color' => 'primary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Secondary filled',
                'color' => 'secondary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Default filled',
                'color' => 'default',
                'type' => 'filled'
            ])
            @endbutton
        @endslot
    @endsegment

    @segment([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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' => 'tertiary',
        'layout' => 'left',
        'overlay' => 'light',
        'overlay_opacity' => 'medium',
        'classList' => [
            'splide__slide'
        ]
    ])

        @slot('bottom')
            @button([
                'text' => 'Primary filled',
                'color' => 'primary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Secondary filled',
                'color' => 'secondary',
                'type' => 'filled'

            ])
            @endbutton

            @button([
                'text' => 'Default filled',
                'color' => 'default',
                'type' => 'filled'
            ])
            @endbutton
        @endslot
    @endsegment
@endslider

Different Sizes

Card is based on a paper component

This is a default colored button and it's pretty sweet

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 id="62becf196f4be5.45562282" class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" js-slider-repeat="" data-uid="62becf196f4c8">
    <div class="splide__arrows c-slider__arrows">
        <button id="62becf196f55c" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196f557">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196f5ae" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f5a9">
                    keyboard_arrow_left
            </i>
            </span>
        
        
    </span>
</button>        <button id="62becf196f60e" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196f608">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196f666" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f660">
                    keyboard_arrow_right
            </i>
            </span>
        
        
    </span>
</button>    </div>
    <div class="c-slider__container splide__track">
        <div class="c-slider__inner splide__list" js-slider-inner>
            <!-- segment.blade.php -->
<section id="62becf196e2ec" class="c-slider__item splide__slide c-slider__item--bg-transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196e2df">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196e79d" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196e799">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196e810" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196e80c">
    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>
    <!-- segment.blade.php -->
<section id="62becf196e87c" class="c-slider__item splide__slide c-slider__item--bg-theme c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196e877">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196e943" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196e93f">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196e98d" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196e98a">
    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>
    <!-- segment.blade.php -->
<section id="62becf196e9e4" class="c-slider__item splide__slide c-slider__item--bg-none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196e9e0">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196ea8d" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196ea8a">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196ead1" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196eace">
    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>
    <!-- segment.blade.php -->
<section id="62becf196eb24" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196eb1f">
    
            <!-- video.blade.php -->
    <video id="62becf196ef36" class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="62becf196ef30">

                    <source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        
                    <!-- notice.blade.php -->
<div id="62becf196f1a2" class="c-notice c-notice--info" data-uid="62becf196f19d" aria-labelledby="notice__text__62becf196f1a2">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62becf196f1a2" for="" class="c-notice__message">
                This component is not supported by your browser.
    </span>

</div>                    
    </video>

<button id="62becf196f21b" class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" href="" target="_top" js-video-control="" type="button" aria-pressed="false" data-uid="62becf196f216">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196f276" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f270">
                    play_arrow
            </i>
            </span>
        
        
    </span>
</button>    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196f2df" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196f2da">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196f331" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196f32e">
    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>
    <!-- segment.blade.php -->
<section id="62becf196f389" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--layout-center c-slider__item--overlay-none" style="background-position: 50% 30%;" data-uid="62becf196f384">
    
    
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196f43a" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196f437">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196f480" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196f47d">
    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([
    'showStepper' => true,
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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' => 'theme',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium'
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'theme',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
    ])
    @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 id="62becf196fab45.14331887" class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" js-slider-repeat="" data-uid="62becf196fabe">
    <div class="splide__arrows c-slider__arrows">
        <button id="62becf196fb51" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196fb4c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196fb9b" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196fb97">
                    keyboard_arrow_left
            </i>
            </span>
        
        
    </span>
</button>        <button id="62becf196fbea" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196fbe6">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf196fc32" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196fc2f">
                    keyboard_arrow_right
            </i>
            </span>
        
        
    </span>
</button>    </div>
    <div class="c-slider__container splide__track">
        <div class="c-slider__inner splide__list" js-slider-inner>
            <!-- segment.blade.php -->
<section id="62becf196f942" class="c-slider__item splide__slide c-slider__item--bg-transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196f93c">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf196fa28" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196fa23">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf196fa75" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf196fa72">
    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([
    'showStepper' => true,
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/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 id="62becf1970b187.45470484" class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" js-slider-repeat="1" data-uid="62becf1970b23">
    <div class="splide__arrows c-slider__arrows">
        <button id="62becf1970bbd" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf1970bb7">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf1970c08" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf1970c03">
                    keyboard_arrow_left
            </i>
            </span>
        
        
    </span>
</button>        <button id="62becf1970c54" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf1970c4f">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf1970c98" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf1970c94">
                    keyboard_arrow_right
            </i>
            </span>
        
        
    </span>
</button>    </div>
    <div class="c-slider__container splide__track">
        <div class="c-slider__inner splide__list" js-slider-inner>
            <!-- segment.blade.php -->
<section id="62becf1970289" class="c-slider__item splide__slide c-slider__item--bg-none c-slider__item--text-align-center c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-dark c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf1970283">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf1970364" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf197035f">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf19703bf" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf19703ba">
    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>
    <!-- segment.blade.php -->
<section id="62becf1970422" class="c-slider__item splide__slide c-slider__item--bg-theme c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf197041d">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf19704d0" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf19704cd">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf197051e" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf197051b">
    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>
    <!-- segment.blade.php -->
<section id="62becf1970570" class="c-slider__item splide__slide c-slider__item--bg-none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf197056b">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf1970613" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970610">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf197065d" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf1970659">
    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>
    <!-- segment.blade.php -->
<section id="62becf19706bf" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf19706ba">
    
            <!-- video.blade.php -->
    <video id="62becf19707c9" class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="62becf19707c4">

                    <source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        
                    <!-- notice.blade.php -->
<div id="62becf197081d" class="c-notice c-notice--info" data-uid="62becf1970819" aria-labelledby="notice__text__62becf197081d">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__62becf197081d" for="" class="c-notice__message">
                This component is not supported by your browser.
    </span>

</div>                    
    </video>

<button id="62becf1970873" class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" href="" target="_top" js-video-control="" type="button" aria-pressed="false" data-uid="62becf197086e">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becf19708bb" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf19708b6">
                    play_arrow
            </i>
            </span>
        
        
    </span>
</button>    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf1970909" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970906">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf197094c" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf1970949">
    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>
    <!-- segment.blade.php -->
<section id="62becf19709a1" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--layout-center c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf197099c">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 id="62becf1970a67" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970a62">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p id="62becf1970ab6" class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="62becf1970ab3">
    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([
    'showStepper' => true,
    'autoSlide' => false,
    'repeatSlide' => true,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'white',
        'textAlignment' => 'center',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium'
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'textColor' => 'theme',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        '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',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item
@endslider

Blade component parameters

Key Default value Type Available values Description
showStepper true boolean - Option to hide or show stepper.
autoSlide true boolean - If set to true, slider will auto slide with default delay. Can also receive an int to set delay in seconds
peekSlides false boolean - Adds some padding to show a peek of next and previous slides
navigationHover true boolean - Only show navigation when hovering over the slider
ratio 16:9 string - The size ratio of the slider
repeatSlide false boolean - Will allow the slide to repeat its cycle
heroStyle false boolean - -
shadow true boolean - -
arrowButtons {"color":"primary","style":"filled"} array - -
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Slider/slider.json