Staffordshire University Components

Feature Link: Examples

There are no notes for this item.

<div class="grid  grid--spaced  grid-2-cols">
    <div>
        <a class="feature-link" href="">
            <figure class="feature-link__figure">
                <img src="https://placeimg.com/720/360/people" alt="" />
            </figure>

            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Accommodation</h3>
                <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <figure class="feature-link__figure">
                <img src="https://placeimg.com/720/360/nature" alt="" />
            </figure>

            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Life in Staffordshire</h3>
                <p>We’ve invested in great new facilities on campus to make Staffordshire University a hub of activity and opportunity.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Getting involved</h3>
                <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Campus & facilities</h3>
                <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Student Support</h3>
                <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Life on campus</h3>
                <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Link name here</h3>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Graduates give Staffs Uni star role in popular app</h3>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Text link (short)</h3>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Text link (short)</h3>
            </div>
        </a>
    </div>

    <div>
        <a class="feature-link" href="">
            <div class="feature-link__content">
                <h3 class="h4 feature-link__title">Text link (short)</h3>
            </div>
        </a>
    </div>
</div>
 
<div class="grid  grid--spaced  grid-2-cols">
  <div>
    <a class="feature-link" href="">
      <figure class="feature-link__figure">
        <img src="https://placeimg.com/720/360/people" alt=""/>
      </figure>

      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Accommodation</h3>
        <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <figure class="feature-link__figure">
        <img src="https://placeimg.com/720/360/nature" alt=""/>
      </figure>

      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Life in Staffordshire</h3>
        <p>We’ve invested in great new facilities on campus to make Staffordshire University a hub of activity and opportunity.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Getting involved</h3>
        <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Campus & facilities</h3>
        <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Student Support</h3>
        <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Life on campus</h3>
        <p>Where you live is a big part of your student experience and where you’ll meet friends for life.</p>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Link name here</h3>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">{{ placeholderHeadline }}</h3>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Text link (short)</h3>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">{{ loremShort }}</h3>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Text link (short)</h3>
      </div>
    </a>
  </div>

  <div>
    <a class="feature-link" href="">
      <div class="feature-link__content">
        <h3 class="h4 feature-link__title">Text link (short)</h3>
      </div>
    </a>
  </div>
</div>
  • 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