<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"
      }
    ]
  }
}
  • Content:
    .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
    
  • URL: /components/raw/art-homepage-tile/art-homepage-tile.styl
  • Filesystem Path: components/partials/homepages/art-homepage/art-homepage-tile/art-homepage-tile.styl
  • Size: 2.2 KB
  • Handle: @art-homepage-tile
  • Preview:
  • Filesystem Path: components/partials/homepages/art-homepage/art-homepage-tile/art-homepage-tile.twig

There are no notes for this item.