<div class="c-person-grid" data-bkg-theme="base">
<div class="o-container">
<h2 class="u-sr-only" id="person-grid2147">Image grid</h2>
<ul class="c-person-grid__list o-row js-masonry-wrapper" id="person-grid2147">
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Curatorial Assistant, Imaging Specialist</strong><br />Ichthyology
</p>
<p class="c-person-grid__role f-text--small">
<strong>Production Editor</strong><br />Academy Scientific Publications
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<div class="c-person-grid__item-image-placeholder"></div>
</div>
</li>
</li>
</a>
</li>
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Assistant Curator</strong><br />Invertebrate Paleontology
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<img src="/images/test/scientist2.jpg" alt="" />
</div>
</li>
</li>
</a>
</li>
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Title 1</strong><br />Department 1
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<img src="/images/test/scientist3.jpg" alt="" />
</div>
</li>
</li>
</a>
</li>
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Title 1</strong><br />Department 1
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<img src="/images/test/scientist4.jpg" alt="" />
</div>
</li>
</li>
</a>
</li>
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Title 1</strong><br />Department 1
</p>
<p class="c-person-grid__role f-text--small">
<strong>Title 2</strong><br />Department 2
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<img src="/images/test/scientist5.jpg" alt="" />
</div>
</li>
</li>
</a>
</li>
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">FirstName LastName</span>
</h3>
<p class="c-person-grid__title f-text--tag"></p>
<div class="c-person-grid__item-roles">
<p class="c-person-grid__role f-text--small">
<strong>Title 1</strong><br />Department 1
</p>
<p class="c-person-grid__role f-text--small">
<strong>Title 2</strong><br />Department 2
</p>
</div>
</div>
<div class="c-person-grid__item-image">
<img src="/images/test/scientist6.jpg" alt="" />
</div>
</li>
</li>
</a>
</li>
</ul>
</div>
</div>
{% set hID = 'person-grid' ~ random(5000) %}
<div class="c-person-grid" data-bkg-theme="base">
<div class="o-container">
<h2 class="u-sr-only" id="{{ hID }}">{{ title }}</h2>
<ul class="c-person-grid__list o-row js-masonry-wrapper" id="{{hID}}">
{% for item in items %}
<li class="c-person-grid__item o-col o-col-sm-4 js-masonry-item js-watch u-watch--fade-up">
<a href="{{ctaLink}}" class="c-person-grid__item-link">
<div class="c-person-grid__item-content">
<h3 class="c-person-grid__name f-title--h6">
<span class="u-hover-drawline">{{item.name}}</span>
</h3>
<p class="c-person-grid__title f-text--tag">{{item.title}}</p>
{% if item.roles %}
<div class="c-person-grid__item-roles">
{% for role in item.roles %}
<p class="c-person-grid__role f-text--small">
<strong>{{ role.title }}</strong><br/>{{ role.department }}</p>
{% endfor %}
</div>
{% endif %}
{# <span class="c-person-grid__icon" aria-hidden="true">
{% include "03-icons/cta-arrow-right" %}
</span> #}
</div>
{% if not noImage %}
<div class="c-person-grid__item-image">
{% if item.image %}
{{item.image}}
{% else %}
<div class="c-person-grid__item-image-placeholder"></div>
{% endif %}
</div>
{% endif %}
</li>
</li>
</a>
</li>
{% endfor %}
</ul></div></div>
{
"pageColorTheme": "teal",
"title": "Image grid",
"hTag": "h6",
"items": [
{
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Curatorial Assistant, Imaging Specialist",
"department": "Ichthyology"
},
{
"title": "Production Editor",
"department": "Academy Scientific Publications"
}
]
},
{
"image": "<img src=\"/images/test/scientist2.jpg\" alt=\"\" />",
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Assistant Curator",
"department": "Invertebrate Paleontology"
}
]
},
{
"image": "<img src=\"/images/test/scientist3.jpg\" alt=\"\" />",
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Title 1",
"department": "Department 1"
}
]
},
{
"image": "<img src=\"/images/test/scientist4.jpg\" alt=\"\" />",
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Title 1",
"department": "Department 1"
}
]
},
{
"image": "<img src=\"/images/test/scientist5.jpg\" alt=\"\" />",
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Title 1",
"department": "Department 1"
},
{
"title": "Title 2",
"department": "Department 2"
}
]
},
{
"image": "<img src=\"/images/test/scientist6.jpg\" alt=\"\" />",
"name": "FirstName LastName",
"ctaLink": "#",
"roles": [
{
"title": "Title 1",
"department": "Department 1"
},
{
"title": "Title 2",
"department": "Department 2"
}
]
}
],
"image": false
}
.c-person-grid {
margin: 6.4rem 0;
@include break($sm) {
margin: 7.2rem 0 16.4rem;
}
}
.c-person-grid__item {
padding-bottom: 3.2rem;
@include break($sm) {
padding-bottom: 4.2rem;
}
&:last-child {
padding-bottom: 0;
}
}
.c-person-grid__item-link {
display: flex;
flex-direction: column-reverse;
img {
transition: transform 0.3s $ease-standard-cubic;
backface-visibility: hidden;
}
&:hover {
img,
.u-watch--img-shrink.is-in-view & img {
transform: scale(1.1);
}
}
}
.c-person-grid__item-image {
overflow: hidden;
}
.c-person-grid__item-image-placeholder{
background-color: $c-charcoal-light;
width: 40rem;
height: 40rem;
}
.c-person-grid__name {
margin: 1.6rem 0 0.8rem;
}
.c-person-grid__title {
margin-bottom: 2rem;
}
.c-person-grid__icon {
display: block;
margin-top: 1.6rem;
}
.c-person-grid__item-roles {
margin-top: 1.2rem;
}
.c-person-grid__role + .c-person-grid__role {
margin-top: 0.8rem;
}
No notes defined.