Event cards are individual units with the following elements- day/date- event title- event start time - end time- location- short description
When to use
For event listings, event cards can create a row. Example shown has 4 across with horizontal arrows that can show additional cards. Title can be Display Header as shown or a different heading type.
Anatomy
1. Image Link
2. Date (required)
3. Time (required)
4. Location (required)
5. Text
6. Title (required)
7. Container (required)
Best practices
Image can be a placeholder or event category if photos are not available. A variant can have no images if there are never/rarely images available. Tags or categories can be added below description but must have a destination page if linked.
Examples
<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>