University of Staffordshire Pattern Library

Feature Link

These require a class of ‘feature-link–no-image’ or ‘feature-link–with-image’ as appropriate.

<a class="feature-link  feature-link--no-image" href="#">

    <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Life in Staffordshire</h3>
        <p>Where you live is a big part of your student experience and where you'll meet friends for life.</p>
    </div>
</a>
 
{% set className = image ? 'feature-link--with-image' : 'feature-link--no-image' %}

<a class="feature-link  {{ className }}" href="{{ link }}">
  {% if image %}
    <figure class="feature-link__figure">
      <img src="{{ image }}" alt=""/>
    </figure>
  {% endif %}

  <div class="feature-link__content">
    <h3 class="h4 feature-link__title">{{ title }}</h3>
    <p>{{ body }}</p>
  </div>
</a>
  • Content: 
    .feature-link {
  display: block;
  position: relative;
  --accent-color: #{$primary};
  margin-bottom: $spacing-xl;
  color: $dark-blue;
  text-decoration: none;

  &__title {
    display: table;
    position: relative;
    margin-bottom: $spacing-xs;
    padding-right: 1em;
    word-break: break-word;
    font-weight: 500;
    width: calc(100% - #{$spacing-md});

    &:after {
      content: '';
      position: absolute;
      bottom: 0.05em;
      display: inline-block;
      width: 1em;
      height: 2.5em;
      margin-left: $spacing-2xs;
      background: url('#{$image-theme-directory-icon}/icon-gt-red.svg') center center no-repeat;
      background-size: 40%;
      vertical-align: text-bottom;
      transition: transform 75ms ease-out;
    }
  }

  &__figure {
    border-bottom: $spacing-2xs solid rgba(0,0,0,0);
    margin-bottom: $spacing-2xs;
    transition: all 125ms;
  }

  &:hover &__figure {
    border-bottom: $spacing-2xs solid $red;
  }

  &__content {
    padding: $spacing-xs 0;
    
    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  p {
    color: $dark-blue;
  }

  &--no-image &__title {
    border-bottom: $spacing-3xs solid $red;
    padding-bottom: $spacing-md;

    &::after {
      right: 0;
    }
  }

  &--with-image &__title:after {
    height: 1em;
  }
}

a.feature-link {
  .feature-link__title {
    color: $dark-blue;
  }
  &:hover {
    .feature-link__title {
      &:after {
        transform: translateX(0.1rem);
      }
    }

    .feature-link__figure {
      opacity: $link-image-hover-opacity;
    }
  }
}

[class *= 'bg-dark-blue'], [class *= 'bg-teal'], [class *= 'bg-digital-blue'], .burgundy-on-lavender, .dark-blue-on-pale-blue {
  & .feature-link {
    color: white;

    & p {
      color: white;
    }
  }

  & a.feature-link .feature-link__title {
    color: white;
  }
}

// CG: Overrides for use on slabs, etc.
[class *= 'bg-teal'], [class *= 'bg-digital-blue'], .burgundy-on-lavender, .dark-blue-on-pale-blue {
  .feature-link--no-image .feature-link__title,
  .feature-link__figure,
  .feature-link:hover .feature-link__figure {
    border-color: white;
  }

  .feature-link .feature-link__title:after {
    background-image: url('#{$image-theme-directory-icon}/icon-gt-white.svg');
  }
}
  • URL: /components/raw/feature-link/_feature-link.scss
  • Filesystem Path: src\components\feature-link\_feature-link.scss
  • Size: 2.4 KB