Component Library

Link Tertiary 

<a href="#" class="link-tertiary">Tertiary Link Style<span class="arrow"></span></a>
 
<a href="#" class="link-tertiary">{{text}}<span class="arrow"></span></a>
 
{
  "text": "Tertiary Link Style",
  "url": "https://iastate.edu"
}
  • Content: 
    .link-tertiary {
  display: inline-block;
  appearance: none;
  margin: rem(10) 0;
  cursor: pointer;
  color: $iastate-maroon;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(16);
  line-height: (26 / 18);
  text-decoration: underline;
  text-decoration-color: $iastate-maroon;
  position: relative;
  transition: 0.2s text-decoration-color ease-in-out;
  .arrow {
    opacity: 0;
    transition: 0.2s opacity ease-in-out;
    bottom: rem(11);
    top: initial;
    right: initial;
    margin-left: rem(11);
  }
  &:hover {
    text-decoration-color: transparent;
    color: $iastate-maroon;
    .arrow {
      opacity: 1;
    }
  }
}
  • URL: /components/raw/link-tertiary/_link-tertiary.scss
  • Filesystem Path: src/components/link-tertiary/_link-tertiary.scss
  • Size: 662 Bytes

Link Tertiary

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • For the arrow on the right side, the markup <span class="arrow"></span> is required after the button text
  • The custom styles are imported into the index.scss file as @import "../components/link-tertiary/link-tertiary";
  • Typically the button would be placed onto a page using the companion component link-set, which allows for multiple instances of the links to be output