<div class="collection collection--divide-horizontal ">
<h2 class="headline-group collection__headline">
<span class="headline-group__head">Collection Headline</span>
</h2>
<div class="grid ">
<div class="fast-fact ">
<div class="fast-fact__stat">
<div class="headline-group ">
<span class="headline-group__head">50 ways</span>
</div>
</div>
<div class="fast-fact__description">
<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
</div>
</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>
<a href="#" class="cta ">
<div class="cta__content">
<h3 class="headline-group ">
<span class="headline-group__head">Call to Action</span>
</h3>
<div class="editorial">
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
<span class="icon "><span class="icon__glyph ic ic--diamond-arrow" aria-hidden="true"></span><span class="icon__label">Useful action label for link</span></span>
</div>
</a>
<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>
<a href="#" class="cta ">
<div class="cta__content">
<h3 class="headline-group ">
<span class="headline-group__head">Call to Action</span>
</h3>
<div class="editorial">
<p class="">
<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>
</div>
<span class="icon "><span class="icon__glyph ic ic--diamond-arrow" aria-hidden="true"></span><span class="icon__label">Useful action label for link</span></span>
</div>
</a>
<div class="fast-fact ">
<div class="fast-fact__stat">
<div class="headline-group ">
<span class="headline-group__head">50 ways</span>
</div>
</div>
<div class="fast-fact__description">
<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>
</div>
</div>
</div>
</div>
<div class="collection {{ collection.variant }} {{ layout_component }}">
{% include '@headline-group' with { hg: collection.hg } %}
{% if collection.p %}
<div class="collection__description">
{% include '@p' with { p: collection.p } %}
</div>
{% endif %}
{% include "@grid" with { grid: collection.grid } %}
{% if collection.button %}
<div class="collection__button">
{% include '@button' with { button: collection.button } %}
</div>
{% endif %}
</div>
{
"fast_fact": {
"hg": {
"tag": "div",
"headline": "50 ways"
},
"content": "<p>It's really not my habit to intrude. Furthermore, I hope my meaning won't be lost or misconstrued.</p>"
},
"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"
}
},
"course_teaser": {
"hg": {
"tag": "h3",
"headline": {
"url": "http://www.example.com",
"title": "Course 123"
},
"sub": "Long Title of Course Goes Here"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
}
},
"pullquote": {
"pattern": "@p",
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
},
"cite": {
"citation": "Edgar Rice Burroughs, <em>Princess of Mars</em>"
}
},
"cta": {
"hg": {
"tag": "h3",
"headline": "Call to Action"
},
"p": {
"content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
},
"icon_link": {
"variant": "icon-link--hidden-label"
},
"icon": {
"glyph": "ic--diamond-arrow",
"label": "Useful action label for link"
},
"link": {
"url": "https://goo.gl/maps/6EnbowefKn62"
}
},
"program_card": {
"hg": {
"tag": "h3",
"headline": "Program Title"
},
"link": {
"url": "http://www.example.com"
},
"availability": [
{
"program_icon": {
"category": "Major",
"category_short": "M",
"variant": "program-icon--major"
}
},
{
"program_icon": {
"category": "Minor",
"category_short": "m",
"variant": "program-icon--minor"
}
},
{
"program_icon": {
"category": "Pre-professional Program",
"category_short": "P",
"variant": "program-icon--pre-professional"
}
}
]
},
"collection": {
"hg": {
"headline": "Collection Headline",
"tag": "h2",
"variant": "collection__headline"
},
"grid": {
"items": [
{
"pattern": "@fast-fact"
},
{
"pattern": "@teaser"
},
{
"pattern": "@cta"
},
{
"pattern": "@teaser"
},
{
"pattern": "@cta"
},
{
"pattern": "@fast-fact"
}
]
},
"variant": "collection--divide-horizontal"
}
}
.collection {
.headline-group.collection__headline {
margin-bottom: rr-gridbase(4);
}
.collection__description {
p {
@include rr-font-compute(xl, medium);
}
}
& > .grid {
overflow: visible;
}
.collection__button {
margin-top: rr-gridbase(4);
}
&.collection--center-button {
.collection__button {
display: flex;
justify-content: center;
}
}
&.collection--archive {
margin-bottom: rr-gridbase(4);
.collection__button {
button,
.button {
margin-bottom: rr-gridbase(4);
}
}
}
&.collection--divide-horizontal {
& > .grid {
> * {
border-bottom: color(gray-medium-light) rem(1px) solid;
}
&.grid.grid--xlarge {
> :first-child {
padding-top: rr-gridbase(4);
border-top: color(gray-medium-light) rem(1px) solid;
}
}
}
}
&.collection--teaser-card {
.teaser {
@include teaser-card;
}
}
&.collection--teaser-event-card {
.teaser {
@include teaser-event-card;
}
}
}
There are no notes for this item.