Component Library

Link Set 

<div class="link-set">
    <ul>
        <li>
            <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Secondary Link Style<span class="arrow"></span></a>
        </li>
        <li>
            <a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
        </li>
        <li>
            <a href="https://iastate.edu" class="link-set__link link-tertiary">Tertiary Link Style<span class="arrow"></span></a>
        </li>
    </ul>
</div>
 
<div class="link-set">
  <ul>
    {% for link in links %}
    <li>
      <a href="{{link.url}}" class="link-set__link{% if link.variant %} {{link.variant}}{% endif %}">{{link.text}}{% if link.variant %}<span class="arrow"></span>{% endif %}</a>
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "links": [
    {
      "url": "https://iastate.edu",
      "text": "Secondary Link Style",
      "variant": "iastate22-link-secondary"
    },
    {
      "url": "https://iastate.edu",
      "text": "External Link Style",
      "variant": "iastate22-link-external"
    },
    {
      "url": "https://iastate.edu",
      "text": "Tertiary Link Style",
      "variant": "link-tertiary"
    }
  ]
}
  • Content: 
    .paragraph-widget--link-set {
  margin-bottom: rem(50);
}

.link-set {
  ul {
    padding: 0;
    li {
      padding-left: 0;
      margin: 0 0 rem(12) 0;
      text-indent: 0;
      &:before {
        display: none;
      }
    }
  }
}

.link-set__link {
  color: $iastate-maroon;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  &.iastate22-link-external {
    font-size: rem(18);
    text-decoration: none;
    line-height: (25 / 18);
    &:after {
      content: "";
      width: rem(18);
      height: rem(18);
      background-image: url("data:image/svg+xml,%0A%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-jrvdubsivk-1' points='0 0 18 0 18 18 0 18'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='image'%3E%3Cmask id='mask-jrvdubsivk-2' fill='white'%3E%3Cuse xlink:href='%23path-jrvdubsivk-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Path'%3E%3C/g%3E%3Cg id='Group' mask='url(%23mask-jrvdubsivk-2)' fill='%237C2529' fill-rule='nonzero'%3E%3Cg transform='translate(1.000000, 1.000000)' id='Path'%3E%3Cpolygon points='5 -1 5 1 1 1 1 15 15 15 15 11 17 11 17 17 -1 17 -1 -1'%3E%3C/polygon%3E%3Cpolygon points='17 -1 17 8 15 8 15 1 8 1 8 -1'%3E%3C/polygon%3E%3Cpolygon points='15.2928932 -0.707106781 16.7071068 0.707106781 6.70710678 10.7071068 5.29289322 9.29289322'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      background-size: rem(18);
      display: inline-block;
      position: relative;
      top: rem(4);
      margin-left: rem(12);
    }
    &:hover {
      text-decoration: underline;
      color: $iastate-maroon;
    }
    .arrow {
      display: none;
    }
  }

  &.iastate22-link-secondary,
  &.link-tertiary {
    margin: 0;
  }
}
  • URL: /components/raw/link-set/_link-set.scss
  • Filesystem Path: src/components/link-set/_link-set.scss
  • Size: 2 KB

Link Set

This is a custom component (no class prefix in place as it does not conflict with bootstrap, although the “link-seondary” subcomponent is prefixed “iastate22-link-secondary”)

  • This is a companion component to link-secondary, allowing for multiple instances of the button to be output
  • By adding either "iastate22-link-secondary" or "link-tertiary" in the config file as an option of "variant": - the secondary or tertiary link styles will be pulled, if link is pointing to any site pointing outside of https://www.iastate.edu/, the external link icon will be added with no option needed for the "variant"
  • 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-set/link-set";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--link-set">.