<div class="c-research-hover-list js-image-hover" data-bkg-theme="base">
<div class="o-container c-research-hover-list__content">
<h2 class="c-research-hover-list__title f-title--h3" id="research-hover-list962">Our areas of research</h2>
<ul class="c-research-hover-list__list o-row" aria-labelledby="research-hover-list962">
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="1">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="1" aria-hidden="true">
<img src="/images/homepage/Home_Dinosaur.png" alt="placeholder - illustration of animal bones" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
<a href="#" class="c-research-hover-list__item-link u-hover-drawline">
Water nutrients and contaminents
</a>
</h3>
<div class="o-accordion c-research-hover-list__databases">
<button class="o-accordion__button js-accordion-toggle js-accordion-close-outside-click o-accordion__button--inline" aria-expanded="false" data-closedelay="240">
<span class="f-text--tag f-upper f-spaced u-hover-drawline--thin">View Databases</span>
<span class="o-accordion__icon o-accordion__icon--inline" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<ul class="c-research-hover-list__database-items">
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database One
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Two
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Three
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Four
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
</div>
</div>
</li>
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="2">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="2" aria-hidden="true">
<img src="/images/homepage/Home_Octopus.png" alt="placeholder - illustration of animal bones" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
<a href="#" class="c-research-hover-list__item-link u-hover-drawline">
Small aquatic animals and insects
</a>
</h3>
<div class="o-accordion c-research-hover-list__databases">
<button class="o-accordion__button js-accordion-toggle js-accordion-close-outside-click o-accordion__button--inline" aria-expanded="false" data-closedelay="240">
<span class="f-text--tag f-upper f-spaced u-hover-drawline--thin">View Databases</span>
<span class="o-accordion__icon o-accordion__icon--inline" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<ul class="c-research-hover-list__database-items">
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database One
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Two
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Three
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Four
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
</div>
</div>
</li>
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="3">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="3" aria-hidden="true">
<img src="/images/homepage/Home_Crab.png" alt="placeholder - illustration of fish" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
Wetlands
</h3>
<div class="o-accordion c-research-hover-list__databases">
<button class="o-accordion__button js-accordion-toggle js-accordion-close-outside-click o-accordion__button--inline" aria-expanded="false" data-closedelay="240">
<span class="f-text--tag f-upper f-spaced u-hover-drawline--thin">View Databases</span>
<span class="o-accordion__icon o-accordion__icon--inline" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<ul class="c-research-hover-list__database-items">
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database One
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Two
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
</div>
</div>
</li>
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="4">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="4" aria-hidden="true">
<img src="/images/homepage/Home_Dinosaur.png" alt="placeholder - illustration of animal bones" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
Algae
</h3>
<a class="c-research-hover-list__database-link f-text--tag f-upper f-spaced" href="#" rel="nofollow noopener">
<span class="u-hover-drawline--thin">Single Database Link</span>
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="5">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="5" aria-hidden="true">
<img src="/images/homepage/Home_Octopus.png" alt="placeholder - illustration of animal bones" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
Watershed ecology
</h3>
<div class="o-accordion c-research-hover-list__databases">
<button class="o-accordion__button js-accordion-toggle js-accordion-close-outside-click o-accordion__button--inline" aria-expanded="false" data-closedelay="240">
<span class="f-text--tag f-upper f-spaced u-hover-drawline--thin">View Databases</span>
<span class="o-accordion__icon o-accordion__icon--inline" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<ul class="c-research-hover-list__database-items">
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database One
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Two
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
</div>
</div>
</li>
<li class="c-research-hover-list__item js-image-hover-link o-col o-col-sm-6" data-idx="6">
<span class="c-research-hover-list__image js-image-hover-image" data-idx="6" aria-hidden="true">
<img src="/images/homepage/Home_Crab.png" alt="placeholder - illustration of fish" />
</span>
<h3 class="c-research-hover-list__item-title f-title--h4">
Fish ecology
</h3>
<div class="o-accordion c-research-hover-list__databases">
<button class="o-accordion__button js-accordion-toggle js-accordion-close-outside-click o-accordion__button--inline" aria-expanded="false" data-closedelay="240">
<span class="f-text--tag f-upper f-spaced u-hover-drawline--thin">View Databases</span>
<span class="o-accordion__icon o-accordion__icon--inline" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</button>
<div class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<ul class="c-research-hover-list__database-items">
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database One
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Two
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
<li class="c-research-hover-list__database-item">
<a class="c-research-hover-list__database-link c-research-hover-list__database-link--multi" href="#" rel="nofollow noopener">
Database Three
<span class="c-research-hover-list__icon" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.88672 12.9802L12.9781 3.88885" class="u-ct-stroke" />
<path d="M6.61719 3.88892H12.9811V10.2529" class="u-ct-stroke" />
</svg>
</span>
</a>
</li>
</div>
</div>
</li>
</ul>
</div>
</div>
{% set hTag = hTag is defined ? hTag : "h2" %}
{% set hID = 'research-hover-list' ~ random(5000) %}
<div class="c-research-hover-list js-image-hover" data-bkg-theme="base">
<div class="o-container c-research-hover-list__content">
<h2 class="c-research-hover-list__title f-title--h3" id="{{hID}}">{{title}}</h2>
<ul class="c-research-hover-list__list o-row" aria-labelledby="{{hID}}">
{% for item in items %}
{% include "06-components/research-hover-list-item" with {
item: item,
idx: loop.index
} only %}
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Our areas of research",
"panelColorTheme": "light",
"hTag": "h3",
"items": [
{
"title": "Water nutrients and contaminents",
"link": "#",
"image": "<img src=\"/images/homepage/Home_Dinosaur.png\" alt=\"placeholder - illustration of animal bones\"/>",
"dataBases": [
{
"title": "Database One",
"link": "#"
},
{
"title": "Database Two",
"link": "#"
},
{
"title": "Database Three",
"link": "#"
},
{
"title": "Database Four",
"link": "#"
}
]
},
{
"image": "<img src=\"/images/homepage/Home_Octopus.png\" alt=\"placeholder - illustration of animal bones\"/>",
"title": "Small aquatic animals and insects",
"link": "#",
"dataBases": [
{
"title": "Database One",
"link": "#"
},
{
"title": "Database Two",
"link": "#"
},
{
"title": "Database Three",
"link": "#"
},
{
"title": "Database Four",
"link": "#"
}
]
},
{
"image": "<img src=\"/images/homepage/Home_Crab.png\" alt=\"placeholder - illustration of fish\"/>",
"title": "Wetlands",
"dataBases": [
{
"title": "Database One",
"link": "#"
},
{
"title": "Database Two",
"link": "#"
}
]
},
{
"image": "<img src=\"/images/homepage/Home_Dinosaur.png\" alt=\"placeholder - illustration of animal bones\"/>",
"title": "Algae",
"dataBases": [
{
"title": "Single Database Link",
"link": "#"
}
]
},
{
"image": "<img src=\"/images/homepage/Home_Octopus.png\" alt=\"placeholder - illustration of animal bones\"/>",
"title": "Watershed ecology",
"dataBases": [
{
"title": "Database One",
"link": "#"
},
{
"title": "Database Two",
"link": "#"
}
]
},
{
"image": "<img src=\"/images/homepage/Home_Crab.png\" alt=\"placeholder - illustration of fish\"/>",
"title": "Fish ecology",
"dataBases": [
{
"title": "Database One",
"link": "#"
},
{
"title": "Database Two",
"link": "#"
},
{
"title": "Database Three",
"link": "#"
}
]
}
]
}
.c-research-hover-list {
margin: 4.8rem 0;
@include break($sm) {
margin: 12rem 0;
}
}
.c-research-hover-list__title {
margin-bottom: 2rem;
border-bottom: 0.1rem solid var(--ct-txt);
padding-bottom: 2rem;
}
.c-research-hover-list__item {
width: 100%;
margin: 2rem 0;
position: relative;
}
.c-research-hover-list__item-title {
margin: 1.5rem 0 0.5rem;
width: 100%;
@include break($sm){
width: 80%;
}
}
.c-research-hover-list__image {
position: absolute;
top: -1rem;
right: 0;
transform: translate3d(-4rem, 0rem, 0) scale(0.95);
z-index: 0;
transition: all 0.8s ease-in-out;
opacity: 0;
&.is-active {
transform: translate3d(-2rem, 0rem, 0) scale(1);
opacity: 1;
}
img {
max-height: 20vh;
}
}
.c-research-hover-list__databases {
position: relative;
max-width: 30rem;
.o-accordion__panel {
position: absolute;
top: 100%;
left: 0;
width: 100%;
@include filterWrapperStyles;
z-index: 2;
&.can-animate {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
.c-research-hover-list__database-link {
display: flex;
align-items: center;
min-height: 4.4rem;
// .c-research-hover-list__icon {
// transition: all 0.3s $ease-standard-cubic;
// }
// &:hover .c-research-hover-list__icon {
// transform: translate3d(0.4rem, -0.4rem, 0);
// }
}
.c-research-hover-list__database-link--multi {
@include filterItemStyles;
&:hover,
&:focus {
@include filterHoverStyles;
}
}
.c-research-hover-list__icon {
margin-left: 0.8rem;
}
No notes defined.