Lehigh Clutch Style Guide

Button List 

<div class="my-3 button-list ">
    <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": false
}
  • 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(--gold_60, $gold_60), var(--gold_80, $gold_80));

    .btn {
      display: block;
      padding: 15px;
      font-weight: 700 !important;
      border: 5px solid var(--grey_darkest, $grey_darkest);
      color: var(--grey_darkest, $grey_darkest);
      background: var(--white, $white);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      margin-bottom: 0;

      .arrow {
        font-weight: 700 !important;
        right: 10px !important;
      }

      &:hover {
        background: var(--grey_darkest, $grey_darkest);
        -webkit-box-shadow: none;
        box-shadow: none;
        color: var(--white, $white);
        text-decoration: none;
        text-shadow: none;
      }
    }

    .accent-gold_20 & {
      background: linear-gradient(to left, var(--gold_20, $gold_20), var(--gold_60, $gold_60));
    }

    .accent-teal_60 & {
      background: linear-gradient(to left, var(--teal_20, $teal_20), var(--teal_60, $teal_60));
    }

    .accent-blue_75 & {
      background: linear-gradient(to left, var(--blue_20, $blue_20), var(--blue_75, $blue_75));
    }

    .accent-lehigh_brown & {
      background: linear-gradient(to left, var(--lehigh_brown_60, $lehigh_brown_60), var(--lehigh_brown_80, $lehigh_brown_80));

      .btn {
        border: 5px solid var(--lehigh_brown, $lehigh_brown);
        color: var(--lehigh_brown, $lehigh_brown);

        &:hover {
          background: var(--lehigh_brown, $lehigh_brown);
          color: var(--white, $white);
        }
      }
    }

    .accent-blue_k60 & {
      background: linear-gradient(to left, var(--blue_75, $blue_75), var(--blue_k20, $blue_k20));

      .btn {
        border: 5px solid var(--blue_k60, $blue_k60);
        color: var(--blue_k60, $blue_k60);

        &:hover {
          background: var(--blue_k60, $blue_k60);
          color: var(--white, $white);
        }
      }
    }
  }
}
  • URL: /components/raw/button_list/button_list.scss
  • Filesystem Path: bits/04-components/button_list/button_list.scss
  • Size: 2.2 KB

Display list of buttons.