<div class="card-group card-group--events">
<h2 class="heading text-black font-bold text-2xl md:text-3xl text-center">Watch - VNSNY CHOICE Total, Explained</h2>
<div class="md:flex md:-mr-4 my-5">
<div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
<form>
<label class="font-normal font-sans text-black">Month</label>
<select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
<option value="default">All</option>
<option value="option-0">January</option>
<option value="option-1">February</option>
<option value="option-2">March</option>
<option value="option-3">April</option>
<option value="option-4">May</option>
<option value="option-5">April</option>
<option value="option-6">June</option>
<option value="option-7">July</option>
<option value="option-8">August</option>
<option value="option-9">September</option>
<option value="option-10">October</option>
<option value="option-11">November</option>
<option value="option-12">December</option>
</select>
</form>
</div>
<div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
<form>
<label class="font-normal font-sans text-black">Year</label>
<select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
<option value="default">All</option>
<option value="option-0">2020</option>
<option value="option-1">2021</option>
</select>
</form>
</div>
<div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
<form>
<label class="font-normal font-sans text-black">Location</label>
<select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
<option value="default">All</option>
<option value="option-0">All</option>
<option value="option-1">Apple County</option>
<option value="option-2">Orange County</option>
<option value="option-3">Kale County</option>
</select>
</form>
</div>
<div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
<form>
<label class="font-normal font-sans text-black">Event Type</label>
<select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
<option value="default">All</option>
<option value="option-0">All</option>
<option value="option-1">Learn About MLTC - Educational</option>
<option value="option-2">Learn About Total - Educational</option>
<option value="option-3">For Our Members - Educational</option>
</select>
</form>
</div>
</div>
<div class="mt-8 card-group--column__body flex flex-col">
<div class="mb-8 last:mb-0">
<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">
<div class="w-full md:h-full md:rounded-l event-data-icon bg-primary text-white leading-none uppercase flex md:flex-col md:items-center md:justify-center p-4">
<div class="text-lg md:text-base font-normal tracking-wider md:mb-1">March</div>
<div class="md:hidden"> </div>
<div class="text-lg font-normal md:text-4xl md:mb-1">7</div>
<div class="md:hidden">, </div>
<div class="text-lg md:text-base font-normal tracking-wider">2020</div>
</div>
</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>
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Aerobics at Woodside Community Center</h2>
<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>
<div class="mb-8 last:mb-0">
<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">
<div class="w-full md:h-full md:rounded-l event-data-icon bg-primary text-white leading-none uppercase flex md:flex-col md:items-center md:justify-center p-4">
<div class="text-lg md:text-base font-normal tracking-wider md:mb-1">March</div>
<div class="md:hidden"> </div>
<div class="text-lg font-normal md:text-4xl md:mb-1">7</div>
<div class="md:hidden">, </div>
<div class="text-lg md:text-base font-normal tracking-wider">2020</div>
</div>
</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>
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Aerobics at Woodside Community Center</h2>
<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>
</div>
</div>
<div class="card-group card-group--events">
{{#if heading }}
<h2 class="heading text-black font-bold text-2xl md:text-3xl text-center">{{heading}}</h2>
{{/if}}
{{#if subheading }}
<p class="max-w-screen-lg mx-auto mt-2 text-black font-normal text-lg md:text-xl font-sans text-center">{{subheading}}</p>
{{/if}}
{{#if filters}}
<div class="md:flex md:-mr-4 my-5">
{{#each filters.dropdowns}}
<div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
{{> @form--dropdown}}
</div>
{{/each}}
</div>
{{/if}}
<div class="mt-8 card-group--column__body flex flex-col">
{{#each cards}}
<div class="mb-8 last:mb-0">{{> @card--event}}</div>
{{/each}}
</div>
{{#if button}}
<div class="text-center mt-8">
{{#with button}}
{{> @button--outline }}
{{/with}}
</div>
{{/if}}
</div>
{
"heading": "Watch - VNSNY CHOICE Total, Explained",
"subheading": null,
"cards": [
{
"date": {
"month": "March",
"day": "7",
"year": "2020"
},
"isSmallEventCard": true,
"label": "For Our Members",
"heading": "Aerobics at Woodside Community Center",
"subheading": null,
"description": null,
"image": null,
"author": null,
"eventDetails": {
"time": "2 pm – 6 pm",
"address": "3050 Chaffee Ave, The Bronx, NY 10465"
},
"button": {
"text": "Event Details",
"url": "#"
}
},
{
"date": {
"month": "March",
"day": "7",
"year": "2020"
},
"isSmallEventCard": true,
"label": "For Our Members",
"heading": "Aerobics at Woodside Community Center",
"subheading": null,
"description": null,
"image": null,
"author": null,
"eventDetails": {
"time": "2 pm – 6 pm",
"address": "3050 Chaffee Ave, The Bronx, NY 10465"
},
"button": {
"text": "Event Details",
"url": "#"
}
}
],
"modifier": "events",
"filters": {
"dropdowns": [
{
"default": "All",
"label": "Month",
"option": [
{
"label": "January"
},
{
"label": "February"
},
{
"label": "March"
},
{
"label": "April"
},
{
"label": "May"
},
{
"label": "April"
},
{
"label": "June"
},
{
"label": "July"
},
{
"label": "August"
},
{
"label": "September"
},
{
"label": "October"
},
{
"label": "November"
},
{
"label": "December"
}
]
},
{
"default": "All",
"label": "Year",
"option": [
{
"label": "2020"
},
{
"label": "2021"
}
]
},
{
"default": "All",
"label": "Location",
"option": [
{
"label": "All"
},
{
"label": "Apple County"
},
{
"label": "Orange County"
},
{
"label": "Kale County"
}
]
},
{
"default": "All",
"label": "Event Type",
"option": [
{
"label": "All"
},
{
"label": "Learn About MLTC - Educational"
},
{
"label": "Learn About Total - Educational"
},
{
"label": "For Our Members - Educational"
}
]
}
]
}
}
.card-group {
&--small {
.card--small {
@apply border border-gray;
border-top: none !important;
}
&__cell {
&:before {
@apply block w-full bg-primary;
content: '';
height: 10px;
}
&:nth-child(2n+0) {
&:before {
@apply bg-primary-light;
}
}
&:nth-child(3n+0) {
&:before {
@apply bg-primary;
}
}
&:nth-child(4n+0) {
&:before {
@apply bg-primary-light;
}
}
}
}
}
There are no notes for this item.