Component Library

Link Secondary 

<a href="https://iastate.edu" class="iastate22-link-secondary">Secondary Link Style<span class="arrow"></span></a>
 
<a href="{{url}}" class="iastate22-link-secondary">{{text}}<span class="arrow"></span></a>
 
{
  "text": "Secondary Link Style",
  "url": "https://iastate.edu"
}
  • Content: 
    .iastate22-link-secondary {
  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(18);
  line-height: (25 / 18);
  text-decoration: none;
  position: relative;
  .arrow {
    bottom: rem(11);
    top: initial;
    right: initial;
    margin-left: rem(11);
  }
  &:hover {
    color: $iastate-maroon;
    .arrow {
      width: rem(22);
    }
  }
}
  • URL: /components/raw/link-secondary/_link-secondary.scss
  • Filesystem Path: src/components/link-secondary/_link-secondary.scss
  • Size: 478 Bytes

Link Secondary

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-secondary/link-secondary";
  • 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