UCLA Component Library

Carousel: Card 

<div id="example-card" class="splide">
    <div class="splide__slider">
        <!-- relative -->
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title One</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide one.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Two</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide two.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Three</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide three.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>

                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Four</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide four.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-white">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Five</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide five.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
                <li class="splide__slide">

                    <article class="story__secondary-card has-background-lightest-grey-2">
                        <a class="story__secondary-card-link" href="#">
                            <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
                            <p class="story__secondary-card-date">September 02, 2021</p>
                            <h3 class="story__secondary-card-title"><span>Card Title Six</span></h3>
                        </a>
                        <div class="story__secondary-card-content">
                            <p class="story__secondary-card-blurb">Card content slide six.</p>
                            <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
                        </div>
                    </article>

                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    new Splide("#example-card", {
        perPage: 3,
        rewind: true,
        breakpoints: {
            768: {
                perPage: 2,
            },
            600: {
                perPage: 1,
            },
        }
    }).mount();
</script>