A carousel refers to content that’s navigable in a horizontal orientation with an indicator that tells a user where they are in a sequence and accounts for the number of additional content elements accessible to the left or right. It is often used with a sequence of banners or cards.
When to use
A carousel component can be used in various situations where you want to showcase multiple items or content within a specific area on a page.
Anatomy
1. Carousel Indicator
- The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).
2. Carousel Dot
- A carousel dot refers to a small indicator or navigation element used in a carousel or slideshow component on a website or mobile application. Each dot corresponds to a specific slide and provides a visual indication of the user’s current position within the carousel.
Best Practices
It’s important to use a carousel sparingly and with purpose. Avoid using it for critical information or essential navigation as it can be easily overlooked or missed by users.
Examples
<section
class="ucla-carousel splide"
role="group"
data-per-page="1"
data-per-page-md="2"
data-per-page-lg="3"
aria-label="Basic UCLA Slider"
>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
<li class="splide__slide">
<article class="ucla-card ucla-card__event">
<a class="ucla-card__event-image-link" href="#">
<img
class="ucla-card__image"
src="../../theme-assets/img/examples/event-card-example-3.jpg"
alt="Two children on their phones under the blankets"
/>
</a>
<div class="ucla-card__event-body">
<time class="ucla-card__event-date" datetime="2024-01-21"><span
class="ucla-card__event-month"
>Jan</span>
<span class="ucla-card__event-day">21</span></time>
<div class="ucla-card__event-content">
<h4 class="ucla-card__title"><a
class="ucla-card__title-link"
href="#"
>UCLA First Thursdays</a></h4>
<div class="ucla-card__event-time">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.20016 10.1333L10.1335 9.19998L7.66683 6.73331L7.66683 3.66665L6.3335 3.66665L6.3335 7.26665L9.20016 10.1333ZM7.00016 13.6666C6.07794 13.6666 5.21127 13.4915 4.40016 13.1413C3.58905 12.7915 2.88349 12.3166 2.28349 11.7166C1.68349 11.1166 1.20861 10.4111 0.858828 9.59998C0.508606 8.78887 0.333495 7.9222 0.333495 6.99998C0.333495 6.07776 0.508606 5.21109 0.858829 4.39998C1.20861 3.58887 1.6835 2.88331 2.2835 2.28331C2.8835 1.68331 3.58905 1.2082 4.40016 0.85798C5.21127 0.508203 6.07794 0.333314 7.00016 0.333314C7.92239 0.333314 8.78905 0.508203 9.60016 0.857981C10.4113 1.2082 11.1168 1.68332 11.7168 2.28332C12.3168 2.88332 12.7917 3.58887 13.1415 4.39998C13.4917 5.21109 13.6668 6.07776 13.6668 6.99998C13.6668 7.9222 13.4917 8.78887 13.1415 9.59998C12.7917 10.4111 12.3168 11.1166 11.7168 11.7166C11.1168 12.3166 10.4113 12.7915 9.60016 13.1413C8.78905 13.4915 7.92238 13.6666 7.00016 13.6666ZM7.00016 12.3333C8.47794 12.3333 9.73638 11.814 10.7755 10.7753C11.8142 9.7362 12.3335 8.47776 12.3335 6.99998C12.3335 5.5222 11.8142 4.26376 10.7755 3.22465C9.73638 2.18598 8.47794 1.66665 7.00016 1.66665C5.52238 1.66665 4.26416 2.18598 3.2255 3.22465C2.18638 4.26376 1.66683 5.5222 1.66683 6.99998C1.66683 8.47776 2.18638 9.7362 3.22549 10.7753C4.26416 11.814 5.52238 12.3333 7.00016 12.3333Z"
fill="#666666"
/>
</svg>
<span><time datetime="12:00">12:00 PM</time>
to
<time datetime="22:00">10:00 PM</time></span>
</div>
<div class="ucla-card__event-location">
<svg
width="12"
height="14"
viewBox="0 0 12 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.99984 6.99998C6.3665 6.99998 6.6805 6.86931 6.94184 6.60798C7.20273 6.34709 7.33317 6.03331 7.33317 5.66665C7.33317 5.29998 7.20273 4.98598 6.94184 4.72465C6.6805 4.46376 6.3665 4.33331 5.99984 4.33331C5.63317 4.33331 5.31939 4.46376 5.0585 4.72465C4.79717 4.98598 4.6665 5.29998 4.6665 5.66665C4.6665 6.03331 4.79717 6.34709 5.0585 6.60798C5.31939 6.86931 5.63317 6.99998 5.99984 6.99998ZM5.99984 13.6666C4.21095 12.1444 2.87495 10.7304 1.99184 9.42465C1.10828 8.11931 0.666503 6.91109 0.666503 5.79998C0.666503 4.13331 1.20273 2.80554 2.27517 1.81665C3.34717 0.827758 4.58873 0.333314 5.99984 0.333314C7.41095 0.333314 8.6525 0.827759 9.7245 1.81665C10.7969 2.80554 11.3332 4.13331 11.3332 5.79998C11.3332 6.91109 10.8916 8.11932 10.0085 9.42465C9.12495 10.7304 7.78872 12.1444 5.99984 13.6666Z"
fill="#666666"
/>
</svg>
<span>Westwood Village</span>
</div>
<p class="ucla-card__description">Join us on Broxton Ave every first
Thursday to connect, celebrate the moment, and enjoy tasty food and free
entertainment!</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</section>