University of Staffordshire Pattern Library

Tile: Examples

No notes defined.

<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-4-cols@desktop">
    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=1" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h6  title__highlight">Developing knowledge</h3>
                </div>
                <div class="tile__content-body">
                    <p>Reach your full potential with our postgraduate courses.</p>
                </div>
            </div>
        </a>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=2" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h6  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>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=3" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h6  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>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=4" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h6  title__highlight">There’s still time to apply for 2024 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>
    </article>
</div>

<hr />

<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide">
    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=5" 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>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=7" 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>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=9" 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>

<article>
    <a class="tile" href="">
        <figure class="tile__figure">
            <img src="https://picsum.photos/500/500?random=10" 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>
</article>
</div>

<hr />

<div class="grid  grid--flush  grid-2-cols@mobile-wide">
    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=11" 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>
    </article>

    <article>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=12" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h4  title__highlight">A longer title for the purpose of checking multiple lines</h3>
                </div>
                <div class="tile__content-body">
                    <p><strong>This is too much copy. DON'T DO THIS.</strong> It might look fine at very wide widths, but it won't at smaller widths. The cut off is about here.</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </a>
    </article>
</div>

<hr />

<a class="tile" href="">
    <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=13" class="tile__img" alt="" />
    </figure>

    <div class="tile__content">
        <div class="title  tile__title">
            <h3 class="h4  title__highlight">A longer title for the purpose of checking multiple lines</h3>
        </div>
        <div class="tile__content-body">
            <p><strong>This is too much copy. DON'T DO THIS.</strong> It might look fine at very wide widths, but it won't at smaller widths. The cut off is about here.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</a>
 
<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-4-cols@desktop">
  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=1" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h6  title__highlight">Developing knowledge</h3>
        </div>
        <div class="tile__content-body">
          <p>Reach your full potential with our postgraduate courses.</p>
        </div>
      </div>
    </a>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=2" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h6  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>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=3" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h6  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>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=4" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h6  title__highlight">There’s still time to apply for 2024 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>
  </article>
</div>

<hr/>

<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide">
  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=5" 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>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=7" 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>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=9" 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>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=10" 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>
  </article>
</div>

<hr/>

<div class="grid  grid--flush  grid-2-cols@mobile-wide">
  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=11" 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>
  </article>

  <article>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=12" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h4  title__highlight">A longer title for the purpose of checking multiple lines</h3>
        </div>
        <div class="tile__content-body">
          <p><strong>This is too much copy. DON'T DO THIS.</strong> It might look fine at very wide widths, but it won't at smaller widths. The cut off is about here.</p><p>{{ loremLong }}</p>
        </div>
      </div>
    </a>
  </article>
</div>

<hr/>

<a class="tile" href="">
  <figure class="tile__figure">
    <img src="https://picsum.photos/500/500?random=13" class="tile__img" alt=""/>
  </figure>

  <div class="tile__content">
    <div class="title  tile__title">
      <h3 class="h4  title__highlight">A longer title for the purpose of checking multiple lines</h3>
    </div>
    <div class="tile__content-body">
      <p><strong>This is too much copy. DON'T DO THIS.</strong> It might look fine at very wide widths, but it won't at smaller widths. The cut off is about here.</p><p>{{ loremLong }}</p>
    </div>
  </div>
</a>
  • 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