Lehigh Clutch Style Guide

Button List: Section Display 

<div class="my-3 button-list section-display">
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 1</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 2</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 3</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 4</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 5</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
    <a href="" class="btn btn-primary mb-2 mr-1" role="button">
        <span class="button_text">Button 6</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
</div>
 
<div class="my-3 button-list {% if section %}section-display{% endif %}">
{% block cms_override %}
  {% for i in range(1,6) %}
    {% include '@a_tag' with {
      'text': "Button " ~ i,
      'color': 'mb-2 mr-1',
      'section': section,
    } %}
  {% endfor %}
{% endblock cms_override %}
</div>
 
{
  "section": true,
  "buttons": {
    "1": {
      "text": "Action Button",
      "url": "#",
      "color": "dark-grey"
    }
  }
}
  • Content: 
    .button-list {
  .btn {
    margin: 0 0 $space-one-half 0;
  }

  &.section-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px;
    width: 100%;
    margin: 30px 0;
    overflow: hidden;
    background: linear-gradient(to left, var(--lehigh_brown_60), var(--lehigh_brown_80));
    .btn {
      display: block;
      padding: 15px;
      font-weight: 700 !important;
      border: 5px solid var(--lehigh_brown);
      color: var(--lehigh_brown);
      background: #ffffff;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      margin-bottom: 0;
      .arrow {
        font-weight: 700 !important;
        right: 10px !important;
      }
      &:hover {
        background: var(--lehigh_brown);
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #ffffff;
        text-decoration: none;
        text-shadow: none;
      }
    }
  }
}
  • URL: /components/raw/button_list/button_list.scss
  • Filesystem Path: bits/04-components/button_list/button_list.scss
  • Size: 971 Bytes

Display list of buttons.