<div class="art-homepage-tile" tabindex="0">
<img class="art-homepage-tile__background-image" data-img-parallax src="https://picsum.photos/664/720" alt="">
<div class="art-homepage-tile__container" style="background-image: linear-gradient(359deg, rgba(47, 53, 59, 0.7) 0%, transparent 50%);">
<div class="art-homepage-tile__title" aria-hidden="true">UAE DIRHAM LICENSED PLASTIC BIKE</div>
<div class="art-homepage-tile__preview">
<div class="art-homepage-tile__preview-container">
<h3 class="art-homepage-tile__preview-title">UAE DIRHAM LICENSED PLASTIC BIKE</h3>
<p class="art-homepage-tile__label">DEGREES</p>
<ul class="art-homepage-tile__degree-links-list">
<li class="art-homepage-tile__degree-link">
<a href="https://google.com" class="standard-button standard-button--art standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Mission</span></span>
</div>
</a>
</li>
<li class="art-homepage-tile__degree-link">
<a href="https://google.com" class="standard-button standard-button--art standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">parsing</span></span>
</div>
</a>
</li>
<li class="art-homepage-tile__degree-link">
<a href="https://google.com" class="standard-button standard-button--art standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Burundi Franc</span></span>
</div>
</a>
</li>
<li class="art-homepage-tile__degree-link">
<a href="https://google.com" class="standard-button standard-button--art standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Buckinghamshire</span></span>
</div>
</a>
</li>
</ul>
<div class="art-homepage-tile__description">
<p>Quos accusamus alias tenetur. Quo facilis iusto enim consequatur quis vitae culpa. Cum hic debitis tempore molestiae. Mollitia molestiae facilis molestiae enim. Eum assumenda in. Esse rerum soluta minima. Cumque autem tempora expedita
impedit molestias. Quam deleniti quibusdam. Repellendus distinctio velit amet quasi dolorem vero. Aliquid nesciunt alias qui.</p>
</div>
</div>
</div>
</div>
</div>
<div class="art-homepage-tile" tabindex="0">
<img class="art-homepage-tile__background-image" {{ not noParallax ? 'data-img-parallax' }} src="{{ tile.backgroundImage.src|resize(688)|tojpg }}" alt="{{ backgroundImage.alt | escape }}">
<div class="art-homepage-tile__container"
style="background-image: linear-gradient(359deg, rgba(47, 53, 59, 0.7) 0%, transparent 50%);">
<div class="art-homepage-tile__title" aria-hidden="true">{{ tile.title }}</div>
<div class="art-homepage-tile__preview">
<div class="art-homepage-tile__preview-container">
<h3 class="art-homepage-tile__preview-title">{{ tile.title }}</h3>
<p class="art-homepage-tile__label">DEGREES</p>
<ul class="art-homepage-tile__degree-links-list">
{% for link in tile.degreeLinks %}
<li class="art-homepage-tile__degree-link">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
text: link.text,
url: link.url
}
} %}
</li>
{% endfor %}
</ul>
<div class="art-homepage-tile__description">
{{ tile.description | raw }}
</div>
</div>
</div>
</div>
</div>
{
"siteUnit": "art",
"departmentName": "School of Art and Design",
"background": "light",
"tile": {
"title": "UAE DIRHAM LICENSED PLASTIC BIKE",
"description": "<p>Quos accusamus alias tenetur. Quo facilis iusto enim consequatur quis vitae culpa. Cum hic debitis tempore molestiae. Mollitia molestiae facilis molestiae enim. Eum assumenda in. Esse rerum soluta minima.\n \rCumque autem tempora expedita impedit molestias. Quam deleniti quibusdam. Repellendus distinctio velit amet quasi dolorem vero. Aliquid nesciunt alias qui.</p>",
"backgroundImage": {
"src": "https://picsum.photos/664/720",
"alt": "Alt text for images"
},
"degreeLinks": [
{
"text": "Mission",
"url": "https://google.com"
},
{
"text": "parsing",
"url": "https://google.com"
},
{
"text": "Burundi Franc",
"url": "https://google.com"
},
{
"text": "Buckinghamshire",
"url": "https://google.com"
}
]
}
}
.art-homepage-tile
position relative
width 100%
padding-top calc(720 / 688 * 100%)
z-index 1
overflow hidden
&__container
background-size cover
background-position center
background-repeat no-repeat
background-blend-mode multiply
position absolute
top 0
right 0
bottom 0
left 0
width 100%
max-width 688px
height 100%
display flex
justify-content center
align-items center
z-index 1
&__background-image
position absolute
top 0
left 0
right 0
bottom 0
object-fit cover
object-position center
z-index: -1;
width 100%
&__title
@extends $billboardMicro
color white
position absolute
bottom 24px
left 24px
margin-right 24px
margin-top 24px
+above(mediumDeviceBreakpoint)
bottom 48px
left 48px
margin-right 48px
margin-top 48px
&__preview-title
@extends $billboardMicro
color charcoalLighter
&__preview
display block
position absolute
top 16px
left 16px
flex-direction column
padding 16px
z-index 1
width calc(100% - 32px)
height calc(100% - 32px)
background-color cloudDark
transition all 150ms ease-in-out
opacity 0
overflow-y auto
+above(mediumDeviceBreakpoint)
display flex
overflow-y auto
overflow-x hidden
padding 32px
&__preview-container
display flex
flex-direction column
margin auto
&:focus &__preview
&:focus-within &__preview
&:hover &__preview
opacity 1
&__label
@extends $headline4
margin-top 16px
margin-bottom 8px
&__degree-link
display inline-block
margin-top 8px
margin-right 8px
> a
background-color cloudDark
&__description
@extends $richText
margin-top 24px
There are no notes for this item.