Component Library

Link Block 

<div class="link-block">
    <h2>Optional Subheading Lorem Ipsum Dolor</h2>
    <div class="link-set">
        <ul>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
            </li>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor<span class="arrow"></span></a>
            </li>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem<span class="arrow"></span></a>
            </li>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Name Lorem Ipsum<span class="arrow"></span></a>
            </li>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Dolor<span class="arrow"></span></a>
            </li>
            <li>
                <a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor<span class="arrow"></span></a>
            </li>
        </ul>
    </div>
</div>
 
<div class="link-block">
  {% if title %}
    <h2>{{title}}</h2>
  {% endif %}
  {% include "@link-set" with link_set %}
</div>
 
{
  "title": "Optional Subheading Lorem Ipsum Dolor",
  "link_set": {
    "links": [
      {
        "url": "https://iastate.edu",
        "text": "Link Label Lorem Ipsum Dolor Sit",
        "variant": "iastate22-link-secondary"
      },
      {
        "url": "https://iastate.edu",
        "text": "Link Label Lorem Ipsum Dolor",
        "variant": "iastate22-link-secondary"
      },
      {
        "url": "https://iastate.edu",
        "text": "Link Label Lorem",
        "variant": "iastate22-link-secondary"
      },
      {
        "url": "https://iastate.edu",
        "text": "Link Name Lorem Ipsum",
        "variant": "iastate22-link-secondary"
      },
      {
        "url": "https://iastate.edu",
        "text": "Link Label Lorem Dolor",
        "variant": "iastate22-link-secondary"
      },
      {
        "url": "https://iastate.edu",
        "text": "Link Label Lorem Ipsum Dolor",
        "variant": "iastate22-link-secondary"
      }
    ]
  }
}
  • Content: 
    .paragraph-widget--link-block {
  @extend %extended-component-width;
}

.link-block {
  background-color: $off-white;
  padding: rem(55) rem(39);

  @include media-breakpoint-up(md) {
    padding-left: rem(53);
    padding-right: rem(53);
  }

  @include media-breakpoint-up(lg) {
    padding: rem(60) rem(106);
  }

  h2 {
    padding-bottom: 0;
    @include media-breakpoint-up(lg) {
      width: 60%;
    }

    &:after {
      display: none;
    }
  }

  .link-set {
    ul {
      @include media-breakpoint-up(lg) {
        column-count: 2;
        column-gap: rem(100);
      }
    }
  }
}
  • URL: /components/raw/link-block/_link-block.scss
  • Filesystem Path: src/components/link-block/_link-block.scss
  • Size: 596 Bytes

Link Block

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

  • The title field is optional
  • Contains subcomponent link-set for as many links as are needed to be included
  • The custom styles are imported into the index.scss file as @import "../components/link-block/link-block";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--link-block">.