Organisms

Footers   

Footer - Default

Copy
Edit
<!-- components/Organisms/Footers.php --> <h4>Footer - Default</h4> <footer class="solid-footer footer"> <section class="solid-footer__content"> <div class="solid-footer__content--copyright"> <ul> <li>© inrupt Inc.</li> <li>Build V<span class="build-value">0.1.1</span></li> </ul> </div> <div class="solid-footer__content--links"> <ul> <li><a href=""><img class="link-icon" src="/atomic-core/img/icon/github.svg">Link</a></li> <li><a href=""><img class="link-icon" src="/atomic-core/img/icon/github.svg">Link</a></li> </ul> </div> </section> </footer> <footer class="solid-footer footer" fixed=""> <section class="solid-footer__content"> <div class="solid-footer__content--copyright"> <ul> <li>© inrupt Inc.</li> <li>Build V<span class="build-value">0.1.1</span></li> </ul> </div> <div class="solid-footer__content--links"> <ul> <li><a href=""><img class="link-icon" src="/atomic-core/img/icon/github.svg">Link</a></li> <li><a href=""><img class="link-icon" src="/atomic-core/img/icon/github.svg">Link</a></li> </ul> </div> </section> </footer>
Copy
Copy
Edit
/* scss/Organisms/_Footers.scss */ footer.solid-footer, .solid-footer { height: auto; min-height: 60px; display: flex; align-items: center; width: 100%; &.fixed, &[fixed] { position: fixed; bottom: 0; z-index: 999999; /* update to meet your z-index needs */ width: 100%; left: 0; right: 0; top: auto; @include box-shadow($x-axis: 0, $y-axis: -2px, $blur: 2px, $color: $default); } &__content { display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%; @include mobile { display: flex; justify-content: space-around; flex-wrap: wrap; flex-direction: column; align-items: center; height: 100%; width: 100%; padding: 1em 0; &--copyright, &--links { width: 100%; display: flex; justify-content: center; padding: 0.5rem 0; } } } ul, ol { list-style: none; padding-left: 0; display: flex; li:not(:first-child) { border-left: 1px solid $tertiary-color-1; } li { padding: 0 1em; font-size: 1em; a { img.link-icon, .link-icon { margin-right: .5em; } } } } img.link-icon, .link-icon { margin-right: .5em; } }
Copy
Edit
/* js/Footers.js */