There are no notes for this item.
<div class="title title--has-tail">
<h2 class="title__highlight">Features and <br />Highlights</h2>
</div>
<p>These can be styled with a modifier to the <code>feature-tiles__item</code>, which will cascade to the <code>title__highlight</code> and pseudo-square (if the grid item has one)</p>
<p>Modifiers are in <code>_feature-tiles.scss</code>, currently: <code>accent-red</code>, <code>accent-pink</code>, <code>accent-maroon</code>, and <code>accent-tef-gold</code>.</p>
<p><strong>NB: Use the modifier on this item, not the tile if you want the accent to cascade correctly to the pseudo-square, you don't need to add to the tile as well :)</strong></p>
<div class="grid grid--flush grid-2-cols@mobile-wide grid-3-cols@tablet-wide feature-tiles">
<div class="feature-tiles__item js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Digital Institute London</h3>
</div>
<div class="tile__content-body">
<p>Study Esports, Computer Games Design, Cyber Security, and more, with us in London.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-pink js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Developing knowledge</h3>
</div>
<div class="tile__content-body">
<p>Reach your full potential with our postgraduate courses.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-maroon js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/architecture" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Connecting Continents</h3>
</div>
<div class="tile__content-body">
<p>Study with us, no matter where in the world you come from.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-pink js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Breaking boundaries</h3>
</div>
<div class="tile__content-body">
<p>Public lecture from Ade Adepitan MBE</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">There’s still time to apply for 2020 entry</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-tef-gold js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt="" />
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">TEF Gold</h3>
</div>
<div class="tile__content-body">
<p>Staffordshire University achieves Gold in the Teaching Excellence and Student Outcomes Framework</p>
</div>
</div>
</a>
</div>
</div>
<div class="title title--has-tail">
<h2 class="title__highlight">Features and <br/>Highlights</h2>
</div>
<p>These can be styled with a modifier to the <code>feature-tiles__item</code>, which will cascade to the <code>title__highlight</code> and pseudo-square (if the grid item has one)</p>
<p>Modifiers are in <code>_feature-tiles.scss</code>, currently: <code>accent-red</code>, <code>accent-pink</code>, <code>accent-maroon</code>, and <code>accent-tef-gold</code>.</p>
<p><strong>NB: Use the modifier on this item, not the tile if you want the accent to cascade correctly to the pseudo-square, you don't need to add to the tile as well :)</strong></p>
<div class="grid grid--flush grid-2-cols@mobile-wide grid-3-cols@tablet-wide feature-tiles">
<div class="feature-tiles__item js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/people" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Digital Institute London</h3>
</div>
<div class="tile__content-body">
<p>Study Esports, Computer Games Design, Cyber Security, and more, with us in London.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-pink js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Developing knowledge</h3>
</div>
<div class="tile__content-body">
<p>Reach your full potential with our postgraduate courses.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-maroon js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/architecture" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Connecting Continents</h3>
</div>
<div class="tile__content-body">
<p>Study with us, no matter where in the world you come from.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-pink js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/tech" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">Breaking boundaries</h3>
</div>
<div class="tile__content-body">
<p>Public lecture from Ade Adepitan MBE</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">There’s still time to apply for 2020 entry</h3>
</div>
<div class="tile__content-body">
<p>Apply for a full-time undergraduate degree at Staffordshire University and get guaranteed accommodation.</p>
</div>
</div>
</a>
</div>
<div class="feature-tiles__item feature-tiles__item--accent-tef-gold js-waypoint">
<a class="tile" href="">
<figure class="tile__figure">
<img src="https://placeimg.com/500/500/nature" class="tile__img" alt=""/>
</figure>
<div class="tile__content">
<div class="title tile__title">
<h3 class="h4 title__highlight">TEF Gold</h3>
</div>
<div class="tile__content-body">
<p>Staffordshire University achieves Gold in the Teaching Excellence and Student Outcomes Framework</p>
</div>
</div>
</a>
</div>
</div>
.feature-tiles {
// $tile-accent-colors: see __vars/colours
@media(max-width: map_get($breakpoint-stages, 'mobile-wide'))
{
&__item {
margin-bottom: $spacing-lg;
}
}
@media (min-width: map_get($breakpoint-stages, 'tablet-wide')) {
@supports (display: grid) {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(16, 1fr);
&__item {
position: relative;
grid-column: span 4;
grid-row: span 4;
width: auto !important; // overrides fallback grid sizing
&:nth-child(1) {
grid-column: span 4 / -3;
grid-row: 1 / span 4;
}
&:nth-child(2) {
grid-row: 3 / span 4;
}
&:nth-child(3) {
grid-row: 5 / span 4;
&:after {
position: absolute;
content: '';
width: 25%;
height: 25%;
top: 0;
left: 100%;
}
}
&:nth-child(4) {
grid-row: 9 / span 4;
grid-column: span 4 / -3;
&:after {
position: absolute;
content: '';
width: 25%;
height: 25%;
top: 0;
left: 100%;
}
}
&:nth-child(5) {
grid-row: 11 / span 4;
grid-column: 3 / span 4;
}
&:nth-child(6) {
grid-row: 13 / span 4;
grid-column: span 4 / -1;
&:after {
position: absolute;
content: '';
width: 25%;
height: 25%;
top: 0;
right: 100%;
}
}
&:nth-child(n):after {
background: var(--accent-color, #{$primary});
}
}
.tile__content {
margin-right: 25%; // bit of a silly specific override, but this makes things line up with the grid/squares more nicely.
}
}
}
@keyframes tile__growIn {
from {
opacity: 0.75;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
&__item {
&.js-waypoint {
animation-name: tile__growIn;
animation-play-state: paused;
animation-iteration-count: 1;
animation-duration: 200ms;
}
&.is-waypoint-reached {
animation-play-state: running;
}
}
@at-root .no-js .feature-tiles__item {
animation-play-state: running;
}
.title__highlight {
--background: var(--accent-color);
}
@each $name, $value in $tile-accent-colors {
&__item--accent-#{$name} {
--accent-color: #{$value};
}
}
// --
&__square {
}
// --
a.tile {
transition: transform 200ms;
&:hover {
transform: scale(1.025);
z-index: 2;
}
}
&:hover {
a.tile {
.tile__figure {
img {
filter: grayscale(1);
}
}
&:hover {
.tile__figure {
img {
filter: grayscale(0);
}
}
}
}
}
}