BUX Component Development Platform

CTA Collection: Gray Background 

<div class="bux-cta-collection 
                        bux-cta-collection--gray
                        ">
    <ul>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Ipsum Dolar
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Larenoto
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                Curabitur libero
            </a>
        </li>
        <li>
            <a class="bux-cta-collection__link" href=#>
                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
  - url: '#'
    name: Larenoto
  - url: '#'
    name: Curabitur libero
  - url: '#'
    name: Nulla rutrum nulla
modifier: gray
  • Content: 
    .bux-cta-collection {
    display: flex;
    justify-content: center;
    padding: $sp-24 0;

    ul {
        padding: 0;
        margin: -(rem-calc(28)) 0 0;
        text-align: center;
    }

    ul li {
        display: block;
        text-align: center;
        line-height: rem-calc(28);
        margin-top: rem-calc(28);
    }

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

        &:hover {
            background-color: $gray-light-80;
            color: $gray-dark-80;
        }

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

    .icon {
        display: none;
    }

    @include breakpoint(md) {

        padding: $sp-48 0;

        ul li {
            display: inline-block;
            padding: 0 $sp-48;
            border-right: 2px solid $gray-light-60;

            &:last-child {
                border-right: none;
            }
        }
       
        &__link {
            font-size: $ts-md;
            line-height: $sp-32;
        }

        .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;

    a:hover {
        background-color: $white;
    }
}

.bux-cta-collection--standard-icons {
    .bux-cta-collection__link {
        @include breakpoint(md) {
            display: flex;
            align-items: center;
        }
    }
    .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.1 KB

No notes defined.