<div class="slab collection-grid">
<div class="slab__wrapper">
<div class="slab__header">
<div class="section-intro">
<h2 class="headline-group ">
<span class="headline-group__head">Headline for Both Collections</span>
</h2>
</div>
</div>
<div class="grid slab__content">
<div class="collection ">
<h3 class="headline-group collection__headline">
<span class="headline-group__head">Optional Headline for Collection 1</span>
</h3>
<div class="grid grid--xlarge">
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="collection ">
<h3 class="headline-group collection__headline">
<span class="headline-group__head">Optional Headline for Collection 2</span>
</h3>
<div class="grid grid--xlarge">
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
<div class="teaser ">
<a href="http://www.example.com" class="block-link">
<div class="teaser__content">
<div class="content-meta">
<time datetime="2023-08-24" class="">
August 24, 2023
</time>
<span class="taxonomy">Taxonomy Tag</span>
</div>
<div class="headline-group teaser__headline-group">
<span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% if collection_grid is not empty %}
{% embed '@slab' with { slab: collection_grid.slab } %}
{% block slab_content %}
<div class="grid slab__content">
{% include '@collection' with { collection: collection_grid.collection_first } %}
{% include '@collection' with { collection: collection_grid.collection_second } %}
</div>
{% endblock %}
{% endembed %}
{% endif %}
{
"teaser": {
"hg": {
"headline": "This the teaser headline, which can often be somewhat long, detailed, and wordy",
"tag": "div",
"variant": "teaser__headline-group"
},
"content_meta": {
"taxonomy": {
"tag": "Taxonomy Tag"
},
"datetime": {
"date": "now",
"format": "F d, Y",
"machine": "Y-m-d"
}
},
"link": {
"url": "http://www.example.com",
"title": "Teaser"
}
},
"collection_grid": {
"slab": {
"classes": [
"collection-grid"
],
"section_intro": {
"hg": {
"headline": "Headline for Both Collections",
"tag": "h2"
},
"p": null,
"link": null
}
},
"collection_first": {
"hg": {
"headline": "Optional Headline for Collection 1",
"tag": "h3",
"variant": "collection__headline"
},
"grid": {
"variant": "grid--xlarge",
"items": [
{
"pattern": "@teaser"
},
{
"pattern": "@teaser"
},
{
"pattern": "@teaser"
}
]
}
},
"collection_second": {
"hg": {
"headline": "Optional Headline for Collection 2",
"tag": "h3",
"variant": "collection__headline"
},
"grid": {
"variant": "grid--xlarge",
"items": [
{
"pattern": "@teaser"
},
{
"pattern": "@teaser"
},
{
"pattern": "@teaser"
}
]
}
}
}
}
.collection-grid {
&.collection-grid--major-left {
.grid.slab__content {
display: block;
overflow: visible;
@include rr-break-directive(l) {
display: grid;
grid-gap: 4%;
grid-template-columns: 2fr 1fr;
}
}
.grid .collection {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
@include rr-break-directive(l) {
margin-bottom: 0;
}
}
}
&.collection-grid--fancy {
.teaser--archive {
.teaser__image {
display: none;
}
}
.grid.slab__content {
@supports(display: grid) {
grid-gap: 0;
grid-template-columns: 1fr;
@include rr-break-directive(l) {
grid-template-columns: 65% 35%; // We can get away with percentages here because we're not using grid-gap
}
}
.collection {
&:first-child {
.teaser {
&:first-child {
@include autoscheme($background-color: color(davidson-red));
.teaser__content {
padding: rr-gridbase(4);
@include rr-break-directive(l) {
padding: rr-gridbase(6);
}
.headline-group {
.headline-group__head {
color: color(davidson-white);
&::after {
color: color(davidson-white);
}
@include rr-break-directive(m) {
@include rr-font-compute(3xl, medium);
}
}
}
.content-meta,
.event-meta {
.taxonomy,
.daterange__time {
color: color(davidson-white);
&:nth-child(2) {
&::before {
background-color: color(davidson-white);
}
}
}
}
p {
@include rr-break-directive(m) {
@include rr-font-compute(xl, medium);
}
}
}
.block-link {
@include rr-break-directive(m) {
display: flex;
}
@include rr-break-directive(l) {
display: block;
}
&:hover,
&:active {
background-color: transparent;
color: color(davidson-white);
.headline-group {
.headline-group__head {
background-color: $fancy-on-dark-highlight;
}
}
}
}
}
}
}
&:nth-child(2) {
padding: rr-gridbase(4);
background-color: color(gray-lightest);
@include rr-break-directive(l) {
padding: rr-gridbase(6);
}
}
}
}
}
// Customizations requested for the featured feed.
&.collection-grid--fancy--white {
.grid.slab__content {
.collection:first-of-type {
.content-meta {
color: white;
}
.teaser.teaser--top-stroke .block-link .teaser__content {
margin-top: 0;
}
.grid.grid--xlarge > * {
margin: 0;
}
}
.collection:nth-child(2) {
background-color: unset;
}
}
}
}
// change ratio for collection-grid--major-left when inside a sidebar page column
.with-sidebar.with-sidebar--major-right {
.with-sidebar__main {
.collection-grid.collection-grid--major-left {
margin-bottom: rr-gridbase(4);
padding-right: 0;
padding-left: 0;
@include rr-break-directive(l) {
margin-bottom: 0;
}
.grid.slab__content {
@include rr-break-directive(l) {
grid-template-columns: 2fr 1fr;
}
}
}
}
}
There are no notes for this item.