Site footer

Currently work in progress.

<footer class="page-footer">
    <div class="row">
        <div class="columns small-12 medium-12 large-2">
            <a href="#"><svg role="img" class="logo-footer"><use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use></svg></a>
        </div>
        <div class="columns small-12 medium-4 large-2 large-offset-4">
            <h4>Extras</h4>
            <nav>
                <ul class="footer-nav-list">
                    <li><a href="#">Redactor</a></li>
                    <li><a href="#">ContentBlocks</a></li>
                    <li><a href="#">Commerce</a></li>
                    <li><a href="#">Formalicious</a></li>
                    <li><a href="#">Digital Signage</a></li>
                    <li><a href="#">View All <svg role="img" class="footer-nav-list__arrow"><use xlink:href="/svg/svg-symbols.svg#long-arrow-right"></use></svg></a></li>
                </ul>
            </nav>
        </div>
        <div class="columns small-12 medium-4 large-2">
            <h4>Help</h4>
            <nav>
                <ul class="footer-nav-list">
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Consults</a></li>
                    <li><a href="#">Documentation</a></li>
                    <li><a href="#">Log Support Ticket</a></li>
                </ul>
            </nav>
        </div>
        <div class="columns small-12 medium-4 large-2">
            <h4>Connect</h4>
            <nav>
                <ul class="footer-nav-list">
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row u-mt4">
        <div class="columns small-12 large-6">
            <p class="smallprint">© 2013 - 2019 modmore.</p>
            <p class="smallprint">KVK: 52454606 • VAT: NL204136106B01<br> Boeierstraat 64b, 8937BR, Leeuwarden, The Netherlands</p>
        </div>
        <div class="columns small-12 large-6 align-bottom">
            <nav>
                <ul class="footer-nav-horiz">
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Privacy &amp; Cookies</a></li>
                    <li>
                        <button class="currency-btn" type="button" data-link="current-selector">
							<svg role="img" class="currency-btn__icon"><use xlink:href="/svg/svg-symbols.svg#globe"></use></svg>
							Prices in Euros (&euro;)
						</button>
                        <div class="currency-selector" id="current-selector">
                            <div class="currency-selector__inner">
                                <h2 class="h3">Select your currency:</h2>
                                <ul class="currency-selector__list">
                                    <li><a href="#">USD (&#36;)</a></li>
                                    <li><a href="#">GBP (&pound;)</a></li>
                                    <li><a href="#">RUB (&#8381;)</a></li>
                                    <li><a href="#">CHF (&#67;&#72;&#70;)</a></li>
                                    <li><a href="#">CAD(&#36;)</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>

        </div>
    </div>
</footer>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Footer
    \*------------------------------------*/
    
    .page-footer {
    	margin: 2rem 0 0;
    	padding: 5rem 0;
    	background: #2d3235;
    	-webkit-font-smoothing: antialiased;
    	border-image: linear-gradient(90deg,#ca3a24 16.66667%,#c7801d 0,#c7801d 33.33333%,#caad21 0,#caad21 0, 50%,#35bc6b 0,#35bc6b 66.66667%,#1391cc 0,#1391cc 83.33333%,#7d4fcc 0);
        border-top-width: 10px;
        border-top-style: solid;
    	border-image-slice: 1;
    	border-left-width: 0;
    	border-right-width: 0;
    	border-bottom-width: 0;
    }
    
    .logo-footer {
    	max-width: 150px;
    	height: 25px;
    	fill: #ffffff;
    
    	@include mq(medium) {
    		margin-bottom: 3rem;
    	}
    }
    
    .page-footer h4 {
    	margin: 2rem 0 1rem 0;
    	color: #ffffff;
    	text-transform: uppercase;
    
    	@include mq(medium) {
    		margin-top: 0;
    	}
    }
    
    .page-footer a {
    	color: $color-grey-mid;
    
    	&:hover {
    		color: $color-white;
    	}
    }
    
    .page-footer p.smallprint {
    	margin-bottom: 0;
    	color: $color-grey-mid;
    }
    
    
    /**
     * Footer nav list styles
     */
    .footer-nav-list {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    
    	li {
    		margin: 0.3rem 0;
    		text-align: left;
    	}
    
    	a {
    		color: $color-grey-mid;
    		fill: $color-grey-mid;
    	}
    
    	a:hover {
    		color: $color-white;
    		fill: $color-white;
    	}
    
    	@include mq(medium) {
    		li {
    			margin: 0.6rem 0;
    		}
    	}
    }
    
    .footer-nav-list__arrow {
    	width: 18px;
    	height: 20px;
    	position: relative;
    	top: 4px;
    	left: 4px;
    }
    
    
    
    /**
     * Horizontal nav styles
     */
    .footer-nav-horiz {
    	margin: 1rem 0 0 0;
    	padding: 0;
    	list-style: none;
    
    	@include mq(large) {
    		margin-top: 0;
    		text-align: right;
    	}
    }
    
    .footer-nav-horiz li {
    	position: relative;
    	display: inline-block;
    	margin-right: 2rem;
    
    	@include mq(large) {
    		margin-right: 0;
    		margin-left: 1.5rem;
    	}
    }
    
    .footer-nav-horiz a {
    	font-size: $font-size-small;
    }
    
    
    /**
     * Currency selector
     */
    .currency-btn {
    	background-color: transparent;
    	border: 0;
    	color: $color-grey-mid;
    	font-size: $font-size-small;
    	padding: 0;
    	cursor: pointer;
    
    	&:hover {
    		color: $color-white;
    		text-decoration: underline;
    	}
    }
    
    .currency-btn__icon {
    	width: 20px;
    	max-height: 20px;
    	margin-right: 5px;
    	position: relative;
    	top: 4px;
    }
    
    .currency-selector {
    	display: none;
    	background-color: $color-white;
    	position: absolute;
    	text-align: left;
    	padding: 1.5rem;
    	bottom: 35px;
    	right: 0;
    	min-width: 300px;
    	border-radius: 4px;
    	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.3);
    
    	h2 {
    		margin-top: 0;
    		margin-bottom: 1rem;
    		line-height: 1em;
    		color: $color-text-base;
    	}
    }
    
    .currency-selector.is-active {
    	display: block;
    }
    
    .currency-selector__list {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    
    	li {
    		display: block;
    		margin: 0;
    		border-bottom: 1px solid $color-grey-light;
    	}
    
    	li:last-child {
    		border-bottom: 0;
    	}
    
    	a {
    		display: inline-block;
    		color: $color-primary;
    		padding: 6px 0;
    	}
    
    	a:hover {
    		color: $color-text-hover;
    	}
    }
    
  • URL: /components/raw/page-footer/page-footer.scss
  • Filesystem Path: components/02-components/page-footer/page-footer.scss
  • Size: 2.8 KB