Event heading with an image

<div class="c-figure c-figure--link" style="height: auto;">
  <img class="c-figure__image" alt="" src="https://www.york.ac.uk/media/news-and-events/publiclectures/19-20/800%20x%20400%20OL%20banner%20-%20beige.jpg" width="800" height="400">
  <div class="c-figure__content c-figure__content--teal c-figure__content--left">
    <h1>
      Watch again - York Festival of Ideas 2019: Farid Chenoune discusses Is Fashion Only French?
    </h1>
    <div class="c-label c-label--event-type">
      <i class="c-icon c-icon--before c-icon--comment"></i> Talk
    </div>
  </div>
</div>


<div class="u-two-columns">
  <ul class="c-icon--ul ">
    <li><i class="c-icon--li c-icon c-icon--clock-o" aria-hidden="true" title="Date and time"></i><span class="sr-only">Date and time: </span> Friday 19 June 2020, 6pm to 11.59pm</li>
    <li><i class="c-icon--li c-icon c-icon--map-marker" aria-hidden="true" title="Location"></i><span class="sr-only">Location: </span>Online event</li>
    <li><i class="c-icon--li c-icon c-icon--users" aria-hidden="true" title="Audience"></i><span class="sr-only">Audience: </span>Open to alumni, staff, students, the public</li>
    <li><i class="c-icon--li c-icon c-icon--ticket" aria-hidden="true" title="Admission"></i><span class="sr-only">Admission: </span>Free admission, booking not required</li>
  </ul>
</div>

Event heading without an image

<div class="c-event__nofigure">
  <h1>
    Watch again - York Festival of Ideas 2019: Farid Chenoune discusses Is Fashion Only French?
  </h1>
  <div class="c-label c-label--event-type">
    <i class="c-icon c-icon--before c-icon--comment"></i> Talk
  </div>
</div>


<div class="u-two-columns">
  <ul class="c-icon--ul u-two-columns__nofigure">
    <li><i class="c-icon--li c-icon c-icon--clock-o" aria-hidden="true" title="Date and time"></i><span class="sr-only">Date and time: </span> Friday 19 June 2020, 6pm to 11.59pm</li>
    <li><i class="c-icon--li c-icon c-icon--map-marker" aria-hidden="true" title="Location"></i><span class="sr-only">Location: </span>Online event</li>
    <li><i class="c-icon--li c-icon c-icon--users" aria-hidden="true" title="Audience"></i><span class="sr-only">Audience: </span>Open to alumni, staff, students, the public</li>
    <li><i class="c-icon--li c-icon c-icon--ticket" aria-hidden="true" title="Admission"></i><span class="sr-only">Admission: </span>Free admission, booking not required</li>
  </ul>
</div>

Options

• Heading

  • image: the URL of an image
  • title: The title of the event (required)
  • subtitle: Appears below the title, in smaller text
  • type-text: The text to display for event type
  • type-icon: icon to be used before text

• Details

  • Date and time: The date and time that the event takes place
  • Location: The venue where the event takes place
  • Audience: Who is the event for
  • Admission: Booking details including cost where applicable