BUX Component Development Platform

CTA Collection: With Ui Icons 

<div class="bux-cta-collection 
                        bux-cta-collection--icons
                        ">
    <ul>
        <li>
            <a class="bux-cta-collection__link" href="#">
                <span class="icon icon-graph-pie" aria-hidden="true"></span>
                Ipsum Dolar
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href="#">
                <span class="icon icon-user" aria-hidden="true"></span>
                Larenoto
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href="#">
                <span class="icon icon-envelope" aria-hidden="true"></span>
                Curabitur libero
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href="#">
                <span class="icon icon-graph-pie" aria-hidden="true"></span>
                Nulla rutrum nulla
            </a>
        </li>
    </ul>
</div>
 
{# 

CTA Collection

Available variables:

- modifier:     Sets the style variant of the componet. Allowed values: 
                null, icons, standard-icons, gray  
- links:        An array containing the values for each displayed link
- link.url:     URL for the link
- link.name:    Display name for the link.
- link.icon:    If using icons modifier, takes the machine-name of the BUX icon
                library. If using the standard-icons modifier, takes a URL for
                an SVG icon.
#}


<div class="bux-cta-collection 
            {% if modifier %}
            bux-cta-collection--{{modifier}}
            {% endif %}
            ">
    <ul>
        {% for link in links %}
        <li>
            <a class="bux-cta-collection__link" href="{{link.url}}">
                {% if modifier == 'icons' %}
                <span class="icon icon-{{ link.icon }}" aria-hidden="true"></span>
                {% endif %}
                {% if modifier == 'standard-icons' %}
                <img class="standard-icon" src="{{ link.icon }}" alt="" />
                {% endif %}
                {{link.name}}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
links:
  - url: '#'
    name: Ipsum Dolar
    icon: graph-pie
  - url: '#'
    name: Larenoto
    icon: user
  - url: '#'
    name: Curabitur libero
    icon: envelope
  - url: '#'
    name: Nulla rutrum nulla
    icon: graph-pie
modifier: icons
  • Content: 
    .bux-cta-collection {
    display: flex;
    justify-content: center;
    ul {
        padding: $sp-24 0;
        margin: 0;
        text-align: center;
    }

    ul li {
        display: block;
        text-align: center;
        line-height: rem-calc(28);
        margin-bottom: $sp-16;

        &:last-child {
          margin-bottom: 0;
        }
    }

    &__link {
        text-decoration: none;
        color: $scarlet;
        font-size: $ts-22;
        line-height: rem-calc(28); 
        font-weight: 700;

        &:hover {
          border-bottom: 2px solid $scarlet;
        }

        &:focus {
            outline: 2px solid $focus;
        }
    }

    .icon {
        display: none;
    }

    @include breakpoint(md) {
        ul {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          padding: 0;
          padding-bottom: 4px;
        }
        ul li {
            display: block;
            padding: 0 $sp-48;
            position: relative;
            margin-bottom: 0;

            &::after {
              position: absolute;
              top:$sp-48;
              right:0;
              width: 2px;
              height: $sp-32;
              content: "";
              background-color: $gray-light-60;
            }

            &:last-child::after {
              display: none;
            }
        }
       
        &__link {
            padding: $sp-48 0;
            padding-bottom: 44px;
            font-size: $ts-md;
            line-height: $sp-32;
            text-align: center;
            display: block;

            &:hover {
              border-bottom: 4px solid $scarlet;
              margin-bottom: -4px;
            }
        }

        .icon {
            display: inline-block;
            color: $scarlet;
            padding-right: $sp-12;
            font-size: rem-calc(30);
            translate: 0 7px;

        }
    }
}

.bux-cta-collection--gray {
    background-color: $gray-light-80;
}

.bux-cta-collection--icons {
  ul li::after {
    top: 52px;
  }
}

.bux-cta-collection--standard-icons {
    .bux-cta-collection__link {
        @include breakpoint(md) {
            display: flex;
            align-items: center;
        }
    }

    ul li::after {
      height: 72px;
    }

    .icon {
        font-size: 3.625rem;
        height: 4.5rem;
        translate: 0;
        width: 4.5rem;

        &::before {
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .standard-icon {
        display: none;
        @include breakpoint(md) {
            display: block;
            height: 4.5rem;
            margin: 0 $sp-16 0 0;
            width: 4.5rem;
        }
    }
}
  • URL: /components/raw/cta-collection/_CTA-collection.scss
  • Filesystem Path: src/components/CTA-collection/_CTA-collection.scss
  • Size: 2.8 KB

No notes defined.