Skip to content

Footer Groups

Styles for footer groups used in footer_groups module and footer_group macro.

Structurally .footer-groups and .footer-group are two separate classes. However .footer-group contains additional elements which are:

  • .footer-group__title
  • .footer-group__list
  • .footer-group__item
  • .footer-group__link

Example

Here is an example of footer groups element usage. For presentation purposes we used an h-accordion webcomponent along with it's styles.

HTML
<footer-groups>
    <div class="footer-groups">
        <div class="footer-group">
            <h-accordion-group>        
                <h-accordion-toggler class="accordion__toggler">
                    <span class="footer-group__title">Footer group 1 name</span>

                    <svg class="icon accordion__toggler-icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
                    </svg>
                </h-accordion-toggler>

                <h-accordion-content>
                    <ul class="footer-group__list">
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link1">Footer link 1</a>
                        </li>
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link2">Footer link 2</a>
                        </li>
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link3">Footer link 3</a>
                        </li>
                    </ul>
                </h-accordion-content>
            </h-accordion-group>
        </div>

        <div class="footer-group">
            <h-accordion-group>        
                <h-accordion-toggler class="accordion__toggler">
                    <span class="footer-group__title">Footer group 2 name</span>

                    <svg class="icon accordion__toggler-icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
                    </svg>
                </h-accordion-toggler>

                <h-accordion-content>
                    <ul class="footer-group__list">
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link4">Footer link 4</a>
                        </li>
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link5">Footer link 5</a>
                        </li>
                        <li class="list__item footer-group__item">
                            <a class="link link_secondary footer-group__link" href="/link6">Footer link 6</a>
                        </li>
                    </ul>
                </h-accordion-content>
            </h-accordion-group>
        </div>
    </div>
</footer-groups>

The .footer-groups and .footer-group classes were designed to be used with block elements like <footer-group> or <div>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any footer groups less variable in your User Less section to change footer groups styles.

Variables used to style footer groups.

@footerGroupsSpacing: (@globalSpacing* 2);
@footerGroupLinkColor: @globalFontColor;
@footerGroupLinkHoverColor: @globalFontColor;
@footerGroupListMarginTop: @globalSpacing;
@footerGroupsSpacingXs: @globalSpacing;

If you want to change footer groups styles, you can just change the variables. To change a default link color just modify @footerGroupLinkColor variable.

@footerGroupLinkColor: red;

Here are standard footer groups styles.

.footer-groups {
    width: 100%;
    column-gap: @footerGroupsSpacing;
    row-gap: @footerGroupsSpacing;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.footer-group {
    &__title {
        line-height: normal;
    }

    &__list {
        margin-top: @footerGroupListMarginTop;
    }

    &__link {
        text-decoration: none;
        color: @footerGroupLinkColor;

        &:hover {
            color: @footerGroupLinkHoverColor;
            text-decoration: underline;
        }
    }
}

@media (max-width: (@breakPointXs - 1)) {
    .footer-groups {
        grid-template-columns: 1fr;
        row-gap: @footerGroupsSpacingXs;
    }
}

Webcomponents reference

Styles reference

Modules reference

Macros reference