Design Seeds Boiler - Component Library

Footer 

<footer class="footer l-container">
    <div class="footer__inner l-container__inner">
        <div class="footer__top">
            <div class="footer__top-left footer__icons">
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/manchester-logo 1.svg"></a>
                </div>
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/lshtm-logo 1.svg"></a>
                </div>
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/Kent-logo 1.svg"></a>
                </div>
            </div>
            <div class="footer__top-right">
                <div class="footer__icons-icon footer__icon--last">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                </div>
            </div>
        </div>

        <div class="footer__btm">
            <div class="footer__btm-left">
                <p>The NIHR Health and Social Care Systems and Commissioning Policy Research Unit (PRUs) is part of the NIHR and hosted by The University of Manchester.<br> The views expressed are those of the authors and not necessarily those of the NIHR or the Department of Health and Social Care.</p>
            </div>
            <div class="footer__btm-right">
                <div class="footer__icons-icon footer__icon--last">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                </div>
            </div>
        </div>
    </div>
    </div><!--l-container__inner-->
</footer>
 
<footer class="footer l-container">
    <div class="footer__inner l-container__inner"> 
        <div class="footer__top">
            <div class="footer__top-left footer__icons">
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/manchester-logo 1.svg"></a>
                </div>
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/lshtm-logo 1.svg"></a>
                </div>
                <div class="footer__icons-icon">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/Kent-logo 1.svg"></a>
                </div>
            </div>
            <div class="footer__top-right">
                <div class="footer__icons-icon footer__icon--last">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                </div>
            </div>
        </div>

        <div class="footer__btm">
            <div class="footer__btm-left"><p>The NIHR Health and Social Care Systems and Commissioning Policy Research Unit (PRUs) is part of the NIHR and hosted by The University of Manchester.<br> The views expressed are those of the authors and not necessarily those of the NIHR or the Department of Health and Social Care.</p></div>
            <div class="footer__btm-right">
                <div class="footer__icons-icon footer__icon--last">
                    <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                </div>
            </div>
        </div>
        </div>
    </div><!--l-container__inner-->
</footer>
 
{
  "title": "Footer",
  "items": [
    {
      "name": "Footer menu"
    }
  ]
}
  • Content: 
    .footer {
    font-size: $fnt-size-xsmall;
    
    background-color: $color-main;
    color:#ffffff;
    @include mappy-bp(small) {
        font-size: $fnt-size-small;
    }
    &__inner {
        // padding:0 $elem-pad;
    }   
    &__top {
        display: flex;
        margin-bottom: rem(45);
        &-right {
            margin-left: auto;
            display: none;
            @include mappy-bp(small) {
                display: block;
            }
        }
    }

    &__btm {
        display: grid;
        gap:10px;
        grid-template-columns: 1fr 80px;
        p {
            margin: 0;
        }
        @include mappy-bp(small) {
            gap:50px;
            grid-template-columns: 1fr;
        }
        &-left {
            //grid-column: span 2;
        }
        &-right {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            img {
                width: 100%;
            }
            @include mappy-bp(small) {
                display: none;
            }
        }

        .footer__icon--last {
            max-width: 30px;
        }
    }

    &__address {
        &-heading {
            margin: 0;
        }

        p {
            margin: 0;
        }
    }

    &__icons {
        display: flex;
        gap:20px;
       // grid-template-columns: repeat(3, minmax(auto, 200px)) ;
        @include mappy-bp(small) {
            gap:100px;
        }
        img {
            width: 100%;
            max-height: rem(85);
            @include mappy-bp(small) {
                width: auto;
            }
        }
        &-icon {
           width: 100%;
            // @include mappy-bp(small) {
            //     margin-right: 50%;
            // }
            .footer__top-right & {
                max-width: 70px;
                margin-left: 100px;
            }
        }
    }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/06-footer/_footer.scss
  • Size: 1.9 KB

No notes defined.