<div class="card-group card-group--small">
<h2 class="heading text-black font-bold text-2xl md:text-3xl mb-8 text-center">Latest News</h2>
<div class="card-group__body lg:flex lg:flex-row lg:-ml-4">
<div class="card-group--small__cell w-full lg:w-1/4 lg:pl-4">
<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
<div class="card-content">
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">The World’s Most Beautiful Libraries</h2>
<h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">It is organized as a department of the city's cultural office.</h3>
</div>
<div class="mt-3">
<a href="www.expandtheroom.com" class="button button--default">
Learn More
</a>
</div>
</div>
</div>
<div class="card-group--small__cell w-full lg:w-1/4 lg:pl-4">
<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
<div class="card-content">
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">The World’s Most Beautiful Libraries</h2>
<h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">It is organized as a department of the city's cultural office.</h3>
</div>
<div class="mt-3">
<a href="www.expandtheroom.com" class="button button--default">
Learn More
</a>
</div>
</div>
</div>
<div class="card-group--small__cell w-full lg:w-1/4 lg:pl-4">
<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
<div class="card-content">
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">The World’s Most Beautiful Libraries</h2>
<h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">It is organized as a department of the city's cultural office.</h3>
</div>
<div class="mt-3">
<a href="www.expandtheroom.com" class="button button--default">
Learn More
</a>
</div>
</div>
</div>
<div class="card-group--small__cell w-full lg:w-1/4 lg:pl-4">
<div class="card card--small flex justify-between flex-col items-start flex-grow px-6 py-8 lg:pt-8 min-h-0 mb-4">
<div class="card-content">
<h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">The World’s Most Beautiful Libraries</h2>
<h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">It is organized as a department of the city's cultural office.</h3>
</div>
<div class="mt-3">
<a href="www.expandtheroom.com" class="button button--default">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-group card-group--small">
<h2 class="heading text-black font-bold text-2xl md:text-3xl mb-8 text-center">{{heading}}</h2>
<div class="card-group__body lg:flex lg:flex-row lg:-ml-4">
{{#each cards}}
<div class="card-group--small__cell w-full lg:w-1/4 lg:pl-4">
{{> @card--small}}
</div>
{{/each}}
</div>
</div>
</div>
{
"heading": "Latest News",
"subheading": "Your source for all the latest updates from around the art world",
"cards": [
{
"heading": "The World’s Most Beautiful Libraries",
"subheading": "It is organized as a department of the city's cultural office.",
"description": null,
"caption": null,
"date": null,
"label": null,
"author": null,
"button": {
"text": "Learn More",
"url": "www.expandtheroom.com"
}
},
{
"heading": "The World’s Most Beautiful Libraries",
"subheading": "It is organized as a department of the city's cultural office.",
"description": null,
"caption": null,
"date": null,
"label": null,
"author": null,
"button": {
"text": "Learn More",
"url": "www.expandtheroom.com"
}
},
{
"heading": "The World’s Most Beautiful Libraries",
"subheading": "It is organized as a department of the city's cultural office.",
"description": null,
"caption": null,
"date": null,
"label": null,
"author": null,
"button": {
"text": "Learn More",
"url": "www.expandtheroom.com"
}
},
{
"heading": "The World’s Most Beautiful Libraries",
"subheading": "It is organized as a department of the city's cultural office.",
"description": null,
"caption": null,
"date": null,
"label": null,
"author": null,
"button": {
"text": "Learn More",
"url": "www.expandtheroom.com"
}
}
]
}
.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.