<div class="music-events">
    <div class="music-events__container">
        <h2 class="music-events__title">
            Upcoming Events
        </h2>
        <div class="music-events__events">
            <div class="music-events__event">
                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="event-card-content event-card-content--music">

                            <div class="event-data-with-icon">
                                <div class="event-data-with-icon__icon">
                                    <div class="event-card-content__icon">
                                        <div class="calendar-page calendar-page--light calendar-page--music">
                                            <div class="calendar-page__month">
                                                Nov
                                            </div>
                                            <div class="calendar-page__day">
                                                24
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="event-data-with-icon__detail">
                                    <div class="event-card-content__title">
                                        <h3 class="linked-title linked-title--music linked-title--light">
                                            <a href="#" class="
            linked-title__link linked-title__link--light
            
    ">
        Lorem ipsum dolor sit amet consectetuer adipiscing elit<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
    </a>
                                        </h3>
                                    </div>
                                    <div class="event-card-content__date event-card-content__date--light">
                                        November 24, 2022
                                    </div>
                                    <div class="event-card-content__time event-card-content__time--light">
                                        <span class="event-card-content__dayofweek">Tuesday, </span> 12:30 PM - 2:30 PM
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
            <div class="music-events__event">
                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="event-card-content event-card-content--music">

                            <div class="event-data-with-icon">
                                <div class="event-data-with-icon__icon">
                                    <div class="event-card-content__icon">
                                        <div class="calendar-page calendar-page--light calendar-page--music">
                                            <div class="calendar-page__month">
                                                Nov
                                            </div>
                                            <div class="calendar-page__day">
                                                25
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="event-data-with-icon__detail">
                                    <div class="event-card-content__title">
                                        <h3 class="linked-title linked-title--music linked-title--light">
                                            <a href="#" class="
            linked-title__link linked-title__link--light
            
    ">
        Visitor Series: Walter J. Hood, “How urban spaces can preserve history and build community”<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
    </a>
                                        </h3>
                                    </div>
                                    <div class="event-card-content__date event-card-content__date--light">
                                        November 25, 2022
                                    </div>
                                    <div class="event-card-content__time event-card-content__time--light">
                                        <span class="event-card-content__dayofweek">Wednesday, </span> 12:30 PM - 2:30 PM
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
            <div class="music-events__event">
                <article class="card-with-image card-with-image--light ">
                    <div class="card-with-image__content">
                        <div class="event-card-content event-card-content--music">

                            <div class="event-data-with-icon">
                                <div class="event-data-with-icon__icon">
                                    <div class="event-card-content__icon">
                                        <div class="calendar-page calendar-page--light calendar-page--music">
                                            <div class="calendar-page__month">
                                                Nov
                                            </div>
                                            <div class="calendar-page__day">
                                                25
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="event-data-with-icon__detail">
                                    <div class="event-card-content__title">
                                        <h3 class="linked-title linked-title--music linked-title--light">
                                            <a href="#" class="
            linked-title__link linked-title__link--light
            
    ">
        Suspendisse urna nibh viverra non<span class="linked-title__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
    </a>
                                        </h3>
                                    </div>
                                    <div class="event-card-content__date event-card-content__date--light">
                                        November 25, 2022
                                    </div>
                                    <div class="event-card-content__time event-card-content__time--light">
                                        <span class="event-card-content__dayofweek">Wednesday, </span> 12:30 PM - 2:30 PM
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
        <div class="music-events__cta">

            <a href="https://google.com" class="standard-button standard-button--music standard-button--dark
            standard-button---width standard-button--primary">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See all events</span><span class="standard-button__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16"><path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
                </div>
            </a>
        </div>
    </div>
</div>
{% if events.events is not empty %}
<div class="music-events">
    <div class="music-events__container">
        <h2 class="music-events__title">
            {{ events.title }}
        </h2>
        <div class="music-events__events">
            {% for event in events.events[0:3] %}
                <div class="music-events__event">
                    {% include 'partials/event-card/event-card.twig' with {
                        event: event,
                        background: 'light',
                        siteUnit: 'music',
                        headingEl: 'h3'
                    } only %}
                </div>
            {% endfor %}
        </div>
        <div class="music-events__cta">
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: events.cta.text,
                    url: events.cta.url,
                    type: 'primary',
                    icon: 'right-chevron'
                }
            } %}
        </div>
    </div>
</div>
{% endif %}
{
  "siteUnit": "music",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "events": {
    "title": "Upcoming Events",
    "events": [
      {
        "title": "Lorem ipsum dolor sit amet consectetuer adipiscing elit",
        "permalink": "#",
        "fullDate": "November 24, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Nov",
        "startDay": "24",
        "locations": []
      },
      {
        "title": "Visitor Series: Walter J. Hood, “How urban spaces can preserve history and build community”",
        "permalink": "#",
        "fullDate": "November 25, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Wednesday",
        "shortStartMonth": "Nov",
        "startDay": "25",
        "locations": []
      },
      {
        "title": "Suspendisse urna nibh viverra non",
        "permalink": "#",
        "fullDate": "November 25, 2022",
        "startTime": "12:30 PM",
        "endTime": "2:30 PM",
        "startDayOfWeek": "Wednesday",
        "shortStartMonth": "Nov",
        "startDay": "25",
        "locations": []
      }
    ],
    "cta": {
      "url": "https://google.com",
      "text": "See all events"
    }
  }
}
  • Handle: @music-events
  • Preview:
  • Filesystem Path: components/partials/homepages/music/events/music-events.twig

There are no notes for this item.