University of Staffordshire Pattern Library

Tile: Facility

No notes defined.

<div class="grid  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide">
    <article aria-label="Epic games centre">
        <span class="tile  tile--facility  tile--accent-pale-blue">
            <figure class="tile__figure">
                <img src="https://picsum.photos/400/400?random=1" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title  text-center">
                    <h3 class="h5  title__highlight">Epic games centre</h3>
                </div>
                <div class="tile__content-body">
                    <p>Home to the Epic Games sponsored Design Centre. A fully equipped space designed to nurture future industry developers studying with us on our Games courses.
                        <span id="tile-epic-games-centre-read-more" class="read-more__link" data-item="tile-epic-games-centre-additional">Read more</span>
                    </p>
                    <p id="tile-epic-games-centre-additional" class="read-more__text">Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
                    <a class="button  button--outline-grey">
                        <i class="icon  icon--play-circle-red"></i>
                        Watch video
                    </a>
                    <a class="button  button--outline-grey">
                        <i class="icon  icon--360-red"></i>
                        Open virtual tour
                    </a>
                </div>
            </div>
        </span>
    </article>

    <article aria-label="Esports hub">
        <span class="tile  tile--facility  tile--accent-neon-light">
            <figure class="tile__figure">
                <img src="https://picsum.photos/400/400?random=2" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title  text-center">
                    <h3 class="h5  title__highlight">Esports hub</h3>
                </div>
                <div class="tile__content-body">
                    <p>A customised Esports lab for showcase and learning with top of the range industry standard, featuring tournament level hardware and software.</p>
                    <a class="button  button--outline-grey">
                        <i class="icon  icon--external-link"></i>
                        Visit website
                    </a>
                </div>
            </div>
        </span>
    </article>

    <article aria-label="Vlog/blog space">
        <span class="tile  tile--facility  tile--accent-lavender">
            <figure class="tile__figure">
                <img src="https://picsum.photos/400/400?random=3" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title  text-center">
                    <h3 class="h5  title__highlight">Vlog/blog space</h3>
                </div>
                <div class="tile__content-body">
                    <p>Our Vlog Workspace provides is a private, isolated area packed with digital facilities for you to use.</p>
                    <a class="button  button--outline-grey"><i class="icon  icon--book-red"></i> Read technical details</a>
                </div>
            </div>
        </span>
    </article>
</div>
 
<div class="grid  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide">
  <article aria-label="Epic games centre">
    <span class="tile  tile--facility  tile--accent-pale-blue">
      <figure class="tile__figure">
        <img src="https://picsum.photos/400/400?random=1" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title  text-center">
          <h3 class="h5  title__highlight">Epic games centre</h3>
        </div>
        <div class="tile__content-body">
            <p>Home to the Epic Games sponsored Design Centre. A fully equipped space designed to nurture future industry developers studying with us on our Games courses.
              <span id="tile-epic-games-centre-read-more" class="read-more__link" data-item="tile-epic-games-centre-additional">Read more</span>
            </p>
            <p id="tile-epic-games-centre-additional" class="read-more__text">Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
          <a class="button  button--outline-grey">
            <i class="icon  icon--play-circle-red"></i> 
            Watch video
          </a>
          <a class="button  button--outline-grey">
            <i class="icon  icon--360-red"></i> 
            Open virtual tour
          </a>
        </div>
      </div>
    </span>
  </article>

  <article aria-label="Esports hub">
    <span class="tile  tile--facility  tile--accent-neon-light">
      <figure class="tile__figure">
        <img src="https://picsum.photos/400/400?random=2" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title  text-center">
          <h3 class="h5  title__highlight">Esports hub</h3>
        </div>
        <div class="tile__content-body">
          <p>A customised Esports lab for showcase and learning with top of the range industry standard, featuring tournament level hardware and software.</p>
          <a class="button  button--outline-grey">
            <i class="icon  icon--external-link"></i> 
            Visit website
          </a>
        </div>
      </div>
    </span>
  </article>

  <article aria-label="Vlog/blog space">
    <span class="tile  tile--facility  tile--accent-lavender">
      <figure class="tile__figure">
        <img src="https://picsum.photos/400/400?random=3" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title  text-center">
          <h3 class="h5  title__highlight">Vlog/blog space</h3>
        </div>
        <div class="tile__content-body">
          <p>Our Vlog Workspace provides is a private, isolated area packed with digital facilities for you to use.</p>
          <a class="button  button--outline-grey"><i class="icon  icon--book-red"></i> Read technical details</a>
        </div>
      </div>
    </span>
  </article>
</div>
  • Content: 
    .tile-group {
  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);
          }
        }
      }
    }
  }
}
  • URL: /components/raw/tile/_tile-group.scss
  • Filesystem Path: src\components\tile\_tile-group.scss
  • Size: 403 Bytes
  • Content: 
    .tile {
  // $tile-accent-colors: see __vars/colours

  position: relative;
  display: block;
  overflow: hidden;
  outline: 1px solid $grey--light;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.15);
  min-height: 10em;

  &__figure {
    position: relative;
    margin: 0;
    z-index: 0;

    img {
      transition: filter 250ms;
    }

    @supports (object-fit: cover) {
      img {
        height: 100%;
        max-height: 75vmin;
        object-fit: cover;
        object-position: center center;
      }
    }
  }

  &__content {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-right: 2rem;
    max-height: 90%;
    padding: 0 $spacing-md 1px;
    background: white;
    box-sizing: border-box;
    z-index: 1;

    &-body {
      @include typescale('sm');
      @include line-height('normal');

      & .button > .icon {
        margin-right: $spacing-2xs;
      }
    }
  }

  &--facility {
    margin-bottom: $spacing-xs;

    & .tile__content {
      position: static;
      margin-right: 0;
    }
  }

  &__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-right: 2rem;
    max-height: 90%;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;

    .title:only-child {
      margin: 0;
    }
  }

  &__title {
    margin-top: -$spacing-md!important;
  }

  .title__highlight {
    --background: var(--accent-color);
  }

  .tile {
    .title__highlight {
      a {
        color: white;
        color: var(--color);
      }
    }
  }

  @each $name, $value in $tile-accent-colors {
    &--accent-#{$name} {
      --accent-color: #{$value};

      & .title .title__highlight {
        @if (choose-contrast-color($value) == black) {
          color: black;
        }
      }
    }
  }

  &--no-shadow {
    box-shadow: none;
  }
}

a.tile {
  //.tile__figure {
  //  img {
  //    filter: grayscale(100%);
  //  }
  //}

  &:hover,
  &:focus {
    color: $neutral--primary;

    //.tile__figure {
    //  img {
    //    filter: grayscale(0);
    //  }
    //}
  }

  &:focus {
    outline-width: 3px;
    outline-color: $primary;
    z-index: 2;
  }
}

.has-cta .tile {
  min-height: 30em;
}

.read-more {
  &__link {
    font-weight: bold;
    text-decoration: underline;

    &:after {
      content: '\25BC';
    }

    &.is-open:after {
      content: '\25B2';
    }

    &:hover {
      cursor: pointer;
    }
  }
  &__text {
    display: none;;
  }
}
  • URL: /components/raw/tile/_tile.scss
  • Filesystem Path: src\components\tile\_tile.scss
  • Size: 2.6 KB