ETR Component Library

card: Event 

<div class="card card--event overflow-hidden bg-white border-gray-light rounded flex flex-col md:flex-row md:items-stretch">
    <div class="md:w-24">
        <a class="w-full md:h-full block event-data-icon bg-primary text-white leading-none uppercase flex md:flex-col md:items-center md:justify-center p-4 hover:text-white" href="">
            <div class="text-lg md:text-base font-normal tracking-wider md:mb-1">March</div>
            <div class="md:hidden">&nbsp;</div>
            <div class="text-lg font-normal md:text-4xl  md:mb-1">7</div>
            <div class="md:hidden">,&nbsp;</div>
            <div class="text-lg md:text-base font-normal tracking-wider">2020</div>
        </a>
    </div>
    <div class="event__content px-4 py-6 md:p-6 block w-full md:flex md:items-center md:justify-between md:justify-between">
        <div class="w-3/4">
            <div class="card-content">
                <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">For Our Members</div>
                <a href="#" class="card-content__heading-link">
                    <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Aerobics at Woodside Community Center</h2>
                </a>
                <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>
                <p class="description text-gray-darker font-normal text-lg leading-normal mt-2">
                    2 pm – 6 pm. 3050 Chaffee Ave, The Bronx, NY 10465
                </p>

            </div>
        </div>
        <div class="md:w-1/4 md:text-right">
            <a class="event__link block text-lg text-primary mt-2 mr-2 md:mt-0" href="#">
          Event Details
        </a>
        </div>
    </div>
</div>
 
<div class="card card--event overflow-hidden bg-white border-gray-light rounded flex flex-col md:flex-row md:items-stretch" {{#if animation}}data-aos="{{animation.type}}"{{/if}}>
    <div class="md:w-24">
    {{#with date}}
     {{> @event-data-icon}}
     {{/with}}
     </div>
    <div class="event__content px-4 py-6 md:p-6 block w-full md:flex md:items-center md:justify-between md:justify-between">
        <div class="w-3/4">
          {{> @card-content }}
        </div>
        <div class="md:w-1/4 md:text-right">
        <a class="event__link block text-lg text-primary mt-2 mr-2 md:mt-0" href="{{button.url}}">
          {{ button.text }}
        </a>
        </div>
    </div>
</div>
 
{
  "link": {
    "url": "#"
  },
  "image": null,
  "label": "For Our Members",
  "heading": "Aerobics at Woodside Community Center",
  "subheading": null,
  "description": null,
  "author": null,
  "date": {
    "month": "March",
    "day": "7",
    "year": "2020",
    "link": {
      "url": "#"
    }
  },
  "modifier": "event",
  "isSmallEventCard": true,
  "eventDetails": {
    "time": "2 pm – 6 pm",
    "address": "3050 Chaffee Ave, The Bronx, NY 10465"
  },
  "button": {
    "text": "Event Details",
    "url": "#"
  }
}

There are no notes for this item.