51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Bottom Bar

100% 
<div class="c-bottom-bar">
    <div class="c-bottom-bar__container">
        <div class="c-bottom-bar__row">
            <div class="c-bottom-bar__left">
                <a class="c-button c-button--ghost c-button--shrink u-uppercase" href="#">
    Nach oben
</a>
            </div>
            <div class="c-bottom-bar__center">
                &copy; 2019 Gebrüder Gerstenberg GmbH & Co. KG
            </div>
            <div class="c-bottom-bar__right">
                <div class="c-social-menu c-social-menu">
                    <ul class="c-social-menu__list">
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--facebook" href="#"></a>
                        </li>
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--whatsapp" href="#"></a>
                        </li>
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--mail" href="#"></a>
                        </li>
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--twitter" href="#"></a>
                        </li>
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--instagram" href="#"></a>
                        </li>
                        <li class="c-social-menu__item">
                            <a class="c-social-menu__link c-social-menu__link--youtube" href="#"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="c-bottom-bar">
    <div class="c-bottom-bar__container">
        <div class="c-bottom-bar__row">
            <div class="c-bottom-bar__left">
                {% include '@button--ghost' with {text: 'Nach oben', additionalClasses: 'c-button--shrink u-uppercase'} %}
            </div>
            <div class="c-bottom-bar__center">
                {{ copyright }}
            </div>
            <div class="c-bottom-bar__right">
                {% include '@social-menu' with {facebook: true, whatsapp: true, mail: true, twitter: true, instagram: true, youtube: true, skype: false, linkedin: false} %}
            </div>
        </div>
    </div>
</div>
 
{
  "additionalClasses": "",
  "copyright": "&copy; 2019 Gebrüder Gerstenberg GmbH & Co. KG"
}
  • Content: 
    .c-bottom-bar {
    background-color: $color-yellow;
    color: $color-white;
    margin: 0 -.375rem;

    &__container {
        @include xy-grid-container($global-width);

        padding-bottom: rem-calc(20);
        padding-top: rem-calc(20);
    }

    &__row {
        @include xy-grid;
    }

    &__center,
    &__left,
    &__right {
        align-items: center;
        display: flex;
        justify-content: center;
        text-align: center;

        @include xy-cell();
    }

    &__left,
    &__right {
        margin-bottom: rem-calc(20);
    }

    &__left {
        order: 1;
    }

    &__center {
        order: 2;
    }

    &__right {
        order: 0;
    }

    @include breakpoint(large) {
        margin: 0 -1rem;

        &__container {
            padding-bottom: rem-calc(5);
            padding-top: rem-calc(5);
        }

        &__left {
            justify-content: left;
            text-align: left;
        }

        &__center {
            @include xy-cell(40%);
        }

        &__right {
            justify-content: flex-end;
            text-align: right;
        }

        &__left,
        &__right {
            @include xy-cell(30%);

            margin-bottom: inherit;
        }

        &__left,
        &__center,
        &__right {
            order: inherit;
        }
    }
}
  • URL: /components/raw/bottom-bar/bottom-bar.scss
  • Filesystem Path: src/patterns/20-components/bottom-bar/bottom-bar.scss
  • Size: 1.3 KB

There are no notes for this item.