Component Library

Button Set: Default 

<div class="iastate22-button-set">
    <ul>
        <li>
            <a class="iastate22-button" href="https://iastate.edu">Button<span class="arrow"></span></a>
        </li>
        <li>
            <a class="iastate22-button" href="https://iastate.edu">Another Button<span class="arrow"></span></a>
        </li>
        <li>
            <a class="iastate22-button" href="https://iastate.edu">A Longer Button Lorem<span class="arrow"></span></a>
        </li>
    </ul>
</div>
 
<div class="iastate22-button-set">
  <ul>
    {% for item in items %}
      <li>
        {% if item.url %}
          <a class="iastate22-button" href="{{ item.url }}">{{ item.text }}<span class="arrow"></span></a>
        {% elseif item.video %}
          {% set video = item.video %}
            {% include "@button--video" with video %}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "items": [
    {
      "text": "Button",
      "url": "https://iastate.edu"
    },
    {
      "text": "Another Button",
      "url": "https://iastate.edu"
    },
    {
      "text": "A Longer Button Lorem",
      "url": "https://iastate.edu"
    }
  ]
}
  • Content: 
    .paragraph-widget--button-set {
  margin: rem(22) 0 rem(60);
}

.iastate22-button-set {
  margin: rem(20) 0;
  ul {
    padding: 0;
    li {
      padding-left: 0;
      text-indent: initial;
      &::before {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/button-set/_button-set.scss
  • Filesystem Path: src/components/button-set/_button-set.scss
  • Size: 253 Bytes

Button Set

This is a custom component (the class has been prefaced with .iastate22-[classname]).

  • This is a companion component to button, allowing for multiple instances of the button to be output
  • The custom styles are imported into the index.scss file as @import "../components/button-set/button-set";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--button-set">.