Feature Tiles: London Variants

Ready

Notes
HTML
View
Assets
Info

There are no notes for this item.


        
        <div class="title  title--has-tail">
    <h2 class="title__highlight">London Colour Variants</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 the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently: <code>accent-blue-ldn</code>, <code>accent-blue-deep-ldn</code>,
    <code>accent-magenta-ldn</code>, <code>accent-purple-deep-ldn</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>

<p>As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.</p>

<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide  feature-tiles">
    <div class="feature-tiles__item  feature-tiles__item--accent-blue-deep-ldn  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-blue-ldn  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-magenta-ldn  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-purple-deep-ldn  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  title--bg-tef-gold  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">London Colour Variants</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 the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently: <code>accent-blue-ldn</code>, <code>accent-blue-deep-ldn</code>,
  <code>accent-magenta-ldn</code>, <code>accent-purple-deep-ldn</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>

<p>As the map is overwritten, colours from the main site are not available unless explicitly added to the map in Sass.</p>

<div class="grid  grid--flush  grid-2-cols@mobile-wide  grid-3-cols@tablet-wide  feature-tiles">
  <div class="feature-tiles__item  feature-tiles__item--accent-blue-deep-ldn  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-blue-ldn  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-magenta-ldn  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-purple-deep-ldn  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  title--bg-tef-gold  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>

File:

Content:


                                .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);
          }
        }
      }
    }
  }
}

URL: /components/raw/feature-tiles/_feature-tiles.scss
Filesystem Path: src/components/feature-tiles/_feature-tiles.scss
Size: 3.1 KB

Handle: @feature-tiles--ldn
Variants (2): Default , London Variants
Preview:
- With layout
- Component only
Filesystem Path: src/components/feature-tiles/feature-tiles--ldn.twig
Referenced by (1): @all-component-superpage