Staffordshire University Components

Feature Link: Title Only

There are no notes for this item.

<a class="feature-link" href="">
    <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Life in Staffordshire</h3>
    </div>
</a>
 
<a class="feature-link" href="">
  <div class="feature-link__content">
    <h3 class="h4 feature-link__title">Life in Staffordshire</h3>
  </div>
</a>
  • Content: 
    .feature-link {
  display: block;
  position: relative;
  --accent-color: #{$primary};
  margin-bottom: $spacing-xl;
  color: $neutral--primary;
  text-decoration: none;
  padding: 0 calc(#{$spacing-sm} + 2.5%) 0;
  border-left: $border-accent-width solid $primary;
  border-left: $border-accent-width solid var(--accent-color);

  &__title {
    display: table;
    position: relative;
    margin-bottom: $spacing-xs;
    padding-right: 1em;
    word-break: break-word;

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

  &__figure {
    margin-bottom: $spacing-md;
  }

  &__content {
    padding: $spacing-xs 0;

    > :first-child {
      margin-top: 0;
    }

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

  p {
    color: $neutral--primary;
  }
}

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

    .feature-link__figure {
      opacity: $link-image-hover-opacity;
    }
  }
}
  • URL: /components/raw/feature-link/_feature-link.scss
  • Filesystem Path: src/components/feature-link/_feature-link.scss
  • Size: 1.3 KB