No notes defined.

<footer class=" siteFooter">
    <div class="siteFooter__container">
        <div class="siteFooter__identity">
            <a href="/" class="siteFooter__brand">
                <svg xmlns="http://www.w3.org/2000/svg" class="siteFooter__logo" width="36" height="44" viewBox="3 1 18 22" stroke-width="1" stroke="currentColor" fill="none">
                    <path d="M6 17.6l-2 -1.1v-2.5" />
                    <path d="M4 10v-2.5l2 -1.1" />
                    <path d="M10 4.1l2 -1.1l2 1.1" />
                    <path d="M18 6.4l2 1.1v2.5" />
                    <path d="M20 14v2.5l-2 1.12" />
                    <path d="M14 19.9l-2 1.1l-2 -1.1" />
                    <line x1="12" y1="12" x2="14" y2="10.9" />
                    <line x1="18" y1="8.6" x2="20" y2="7.5" />
                    <line x1="12" y1="12" x2="12" y2="14.5" />
                    <line x1="12" y1="18.5" x2="12" y2="21" />
                    <path d="M12 12l-2 -1.12" />
                    <line x1="6" y1="8.6" x2="4" y2="7.5" />
                </svg>
                <div class="siteFooter__siteName">Boilerplate</div>
            </a>

            <div class="siteFooter__address">
                <div>21 Water Street</div>
                <div>Amesbury, MA 01913</div>
                <div><a href="tel:+19784628848">978-462-8848</a></div>
            </div>

            <div class="siteFooter__socialLinks">
                <a class="siteFooter__socialLink" href="">
                    <span class="sr-only">Visit us on Facebook</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                    </svg>
                </a>

                <a class="siteFooter__socialLink" href="">
                    <span class="sr-only">Visit us on Instagram</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="4" y="4" width="16" height="16" rx="4" />
                        <circle cx="12" cy="12" r="3" />
                        <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
                    </svg>
                </a>

                <a class="siteFooter__socialLink" href="">
                    <span class="sr-only">Visit us on Twitter</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
                    </svg>
                </a>
            </div>
        </div>

        <div class="siteFooter__links">
            <div class="siteFooter__linksGroup">
                <div class="siteFooter__heading">Maine</div>
                <ul class="siteFooter__list">
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Lobster Boating</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Acadia National Park</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Activities</a></li>
                </ul>
            </div>
            <div class="siteFooter__linksGroup">
                <div class="siteFooter__heading">Massachusetts</div>
                <ul class="siteFooter__list">
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Boston</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Lowell</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Salem</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Martha's Vineyard</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Provincetown</a></li>
                </ul>
            </div>
            <div class="siteFooter__linksGroup">
                <div class="siteFooter__heading">New Hampshire</div>
                <ul class="siteFooter__list">
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Towns</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Parks</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Activities</a></li>
                </ul>
            </div>
            <div class="siteFooter__linksGroup">
                <div class="siteFooter__heading">Rhode Island</div>
                <ul class="siteFooter__list">
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Providence</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Newport</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Warwick</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Cranston</a></li>
                </ul>
            </div>
            <div class="siteFooter__linksGroup">
                <div class="siteFooter__heading">Vermont</div>
                <ul class="siteFooter__list">
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Burlington</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Montperlier</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Stowe</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Rutland</a></li>
                    <li class="siteFooter__item"><a class="siteFooter__link" href="#">Brattleboro</a></li>
                </ul>
            </div>
        </div>

        <div class="siteFooter__utility">
            <div class="siteFooter__copyright">© 2022 Boilerplate.</div>

            <nav class=" utilityNav">
                <ul class="utilityNav__list">
                    <li class="utilityNav__item">
                        <a class="utilityNav__link" href="#">privacy policy</a>
                    </li>
                    <li class="utilityNav__item">
                        <a class="utilityNav__link" href="#">legal</a>
                    </li>
                </ul>
            </nav>

        </div>
    </div>
</footer>
  • Content:
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    .siteFooter {
        $b: &;
    
        background-color: config.$blue-900;
        color: config.$white;
        padding: 2rem 0;
    
        a {
            --link-color: #{config.$white};
        }
    
        &__container {
            @include grid;
            align-items: start;
        }
    
    
        &__identity {
            display: grid;
            grid-column: main;
            justify-items: center;
            row-gap: config.$thin-h-space;
            text-align: center;
    
            @include at(md) {
                grid-column: main / 6;
                justify-items: start;
                text-align: left;
            }
    
            @include at(lg) {
                grid-column: main / 5;
            }
        }
    
        &__brand {
            align-items: center;
            color: config.$blue-300;
            display: flex;
            gap: config.$thin-h-space;
        }
    
        &__socialLinks {
            display: flex;
            gap: config.$thin-h-space;
        }
    
        &__links {
            column-gap: var(--column-gap);
            display: grid;
            grid-column: main;
            grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
            row-gap: var(--column-gap);
    
            @include at(md) {
                grid-column: 6 / main;
            }
    
            @include at(lg) {
                grid-column: 5 / main;
            }
        }
    
        &__heading {
            font-weight: 600;
            margin-bottom: 0.75em;
        }
    
        &__list {
            @include no-bullets;
        }
    
        &__utility {
            color: config.$gray-300;
            display: flex;
            font-size: .875rem;
            grid-column: main;
            justify-content: space-between;
        }
    }
    
  • URL: /components/raw/site-footer/_index.scss
  • Filesystem Path: resources/styles/organisms/site-footer/_index.scss
  • Size: 1.6 KB