<div class="collection collection--divide-horizontal ">
<h2 class="headline-group collection__headline">
<span class="headline-group__head">Collection Headline</span>
</h2>
<div class="grid grid--xlarge">
<div class="person-teaser ">
<div class="person-teaser__content">
<h3 class="headline-group person-teaser__name">
<span class="headline-group__head"><a href="http://example.com" class="">Name McNameface</a></span>
</h3>
<div class="person-teaser__info">
<ul class="person-teaser__titles">
<li>Director of Example Departments</li>
</ul>
</div>
<div class="person-teaser__contact">
<p><a href="#">email@davidson.edu</a></p>
<p>704-123-4567</p>
<dl class="inline-terms">
<dt>Office</dt>
<dd>Wall 327</dd>
<dt>Research Lab</dt>
<dd>Wall 325/325A</dd>
</dl>
</div>
</div>
<div class="person-teaser__image">
<img src="https://magicyeti.us/1200/1800/davidson" alt="Photo of [name]" class="" /> </div>
</div>
<div class="person-teaser ">
<div class="person-teaser__content">
<h3 class="headline-group person-teaser__name">
<span class="headline-group__head"><a href="http://example.com" class="">Name McNameface</a></span>
</h3>
<div class="person-teaser__info">
<ul class="person-teaser__titles">
<li>Director of Example Departments</li>
</ul>
</div>
<div class="person-teaser__contact">
<p><a href="#">email@davidson.edu</a></p>
<p>704-123-4567</p>
<dl class="inline-terms">
<dt>Office</dt>
<dd>Wall 327</dd>
<dt>Research Lab</dt>
<dd>Wall 325/325A</dd>
</dl>
</div>
</div>
<div class="person-teaser__image">
<img src="https://magicyeti.us/1200/1800/davidson" alt="Photo of [name]" class="" /> </div>
</div>
<div class="person-teaser ">
<div class="person-teaser__content">
<h3 class="headline-group person-teaser__name">
<span class="headline-group__head"><a href="http://example.com" class="">Name McNameface</a></span>
</h3>
<div class="person-teaser__info">
<ul class="person-teaser__titles">
<li>Director of Example Departments</li>
</ul>
</div>
<div class="person-teaser__contact">
<p><a href="#">email@davidson.edu</a></p>
<p>704-123-4567</p>
<dl class="inline-terms">
<dt>Office</dt>
<dd>Wall 327</dd>
<dt>Research Lab</dt>
<dd>Wall 325/325A</dd>
</dl>
</div>
</div>
<div class="person-teaser__image">
<img src="https://magicyeti.us/1200/1800/davidson" alt="Photo of [name]" class="" /> </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": "@person-teaser",
"context": {
"person_teaser": {
"person_name": "Name McNameface",
"titles": [
"Director of Example Departments"
],
"image": {
"ratio": "2:3",
"width": 1200,
"alt": "Photo of [name]",
"tag": "davidson"
}
}
}
},
{
"pattern": "@person-teaser",
"context": {
"person_teaser": {
"person_name": "Name McNameface",
"titles": [
"Director of Example Departments"
],
"image": {
"ratio": "2:3",
"width": 1200,
"alt": "Photo of [name]",
"tag": "davidson"
}
}
}
},
{
"pattern": "@person-teaser",
"context": {
"person_teaser": {
"person_name": "Name McNameface",
"titles": [
"Director of Example Departments"
],
"image": {
"ratio": "2:3",
"width": 1200,
"alt": "Photo of [name]",
"tag": "davidson"
}
}
}
}
],
"variant": "grid--xlarge"
},
"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.