PeopleVine

Template - Event Grid - HTML Render Engine

Leverage this example to display a grid of upcoming events on your landing page or in your newsletter (styling may need to be updated for newsletters).

 

<div class="ui-update">
    <ul class="blocks blocks_equalHeight blocks_3to2to1">
        <li data-pv-component="event" data-pv-type="eventList" data-pv-parameters="{sortby: 'date_asc', returnTotal: 6}">
            <div class="blockTile blockTile_alignLeft">
                <div class="blockTile-hd blockTile-hd_flush">
                    <div class="imgMask imgMask_fluid">
                        <a class="" href="/event/{@event_no@}"><img class="imgMask-img" data-pv-alt="event_title" data-pv-element="event_graphic"></a>
                    </div>
                </div>
                <div class="blockTile-bd">
                    <ul class="vr vr_x2">
                        <li><span class="txt txt_enlarged mix-txt_medium" data-pv-element="event_date" data-pv-formatter="date(MMMM d yyyy h:mm tt)"></span></li>
                        <li>
                            <a class="" href="/event/{@event_no@}"><span class="hdg hdg_4" data-pv-element="event_title">Event Title</span></a>
                        </li>
                        <li class="vr-override_x6"><span class="txt txt_enlarged" data-pv-element="event_summary">Summary of the event</span></li>
                        <li><span class="hdg hdg_6" data-pv-label="label.venue">Venue</span> <span data-pv-element="event_venue">Event Venue</span></li>
                        <li><span class="hdg hdg_6" data-pv-label="label.location">Location</span> <span data-pv-element="event_location">Event Location</span></li>
                    </ul>
                </div>
                <div class="blockTile-ft">
                    <a class="btn mix-btn_stretch" href="/event/{@event_no@}">View Event</a>
                </div>
            </div>
        </li>
    </ul>
</div>
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.