Custom theme (replace with client name)

Footer 

<div class="footer">
    <div class="footer__container">
        <div class="footer__wrapper">
            <div class="footer__content">
                <div class="footer__brand">
                    <svg xmlns="http://www.w3.org/2000/svg" width="192" height="40" viewBox="0 0 192 40" fill="none">
                        <path d="M24.3407 8.6396L22.9656 2.32906L34.3156 0L31.5095 8.6396H24.3407Z" fill="#303030" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0691 11.0755C10.2751 10.8904 8.57887 11.1753 7.04319 11.802V10.0143L1.5985 11.1895C0.663135 11.3889 0 12.2294 0 13.198V40L4.61402 39.067C6.02405 38.7821 7.04319 37.5143 7.04319 36.047V32.1154C8.27173 32.614 9.60498 32.8989 11.0011 32.8989C17.0321 32.8989 21.8974 27.8205 21.7089 21.624C21.5554 16.1966 17.3602 11.6168 12.0691 11.0755ZM11.0011 26.7094C8.43228 26.7094 6.34515 24.5798 6.34515 21.9587C6.34515 19.3376 8.43228 17.208 11.0011 17.208C13.5698 17.208 15.657 19.3376 15.657 21.9587C15.6639 24.5798 13.5768 26.7094 11.0011 26.7094Z" fill="#303030" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M66.6765 11.111C59.6682 10.2065 53.7698 16.225 54.6563 23.376C55.2566 28.2478 59.1167 32.1865 63.8913 32.7991C70.8996 33.7036 76.798 27.6851 75.9115 20.5341C75.3112 15.6623 71.458 11.7236 66.6765 11.111ZM66.1948 26.6167C62.914 27.2506 60.094 24.3731 60.7152 21.0256C61.0642 19.1523 62.5441 17.6495 64.3729 17.2934C67.6537 16.6595 70.4738 19.537 69.8525 22.8845C69.5105 24.7577 68.0306 26.2677 66.1948 26.6167Z" fill="#303030" />
                        <path d="M31.5164 11.4885H24.3615V32.3931H29.506C30.6159 32.3931 31.5164 31.4743 31.5164 30.3418V11.4885Z" fill="#303030" />
                        <path d="M47.0895 12.4857L44.6115 16.7022L42.1614 12.4928C41.7984 11.8731 41.1423 11.4885 40.4303 11.4885H33.8548L40.5978 21.8803L33.7082 32.386H40.1441C40.8491 32.386 41.5052 32.0085 41.8682 31.3959L44.4998 26.9372L47.0965 31.3817C47.4595 32.0085 48.1157 32.386 48.8207 32.386H55.4031L48.5135 21.8019L55.2496 11.4885H48.8137C48.1087 11.4885 47.4525 11.866 47.0895 12.4857Z" fill="#303030" />
                        <path d="M92.0492 17.9529C92.3299 18.1006 92.5311 18.2438 92.6527 18.3823L93.3685 17.108C92.9381 16.7941 92.4375 16.5309 91.8667 16.3186C91.296 16.1062 90.6737 16 90.0001 16C89.317 16 88.6994 16.1154 88.1474 16.3463C87.6047 16.5679 87.1743 16.9049 86.8562 17.3573C86.538 17.8006 86.379 18.3453 86.379 18.9917C86.379 19.5088 86.4866 19.9289 86.7018 20.2521C86.9263 20.5753 87.2585 20.843 87.6983 21.0554C88.138 21.2678 88.6854 21.4571 89.3404 21.6233C89.9112 21.771 90.3977 21.9141 90.8001 22.0526C91.2118 22.1819 91.5252 22.3481 91.7404 22.5512C91.965 22.7452 92.0773 23.0083 92.0773 23.3407C92.0773 23.747 91.9089 24.0609 91.572 24.2825C91.2352 24.4949 90.758 24.6011 90.1404 24.6011C89.6351 24.6011 89.1486 24.5319 88.6807 24.3934C88.2223 24.2456 87.8199 24.0748 87.4737 23.8809C87.1275 23.6777 86.8749 23.4977 86.7158 23.3407L86 24.6704C86.5614 25.0951 87.1977 25.4229 87.9088 25.6537C88.6199 25.8846 89.3544 26 90.1123 26C90.7767 26 91.3849 25.9077 91.9369 25.723C92.4983 25.5291 92.9428 25.2244 93.2703 24.8089C93.5978 24.3934 93.7615 23.8486 93.7615 23.1745C93.7615 22.5836 93.6258 22.108 93.3545 21.7479C93.0925 21.3878 92.7135 21.1016 92.2176 20.8892C91.7311 20.6676 91.1509 20.4783 90.4773 20.3213C89.9252 20.1921 89.4667 20.0674 89.1018 19.9474C88.7369 19.8181 88.4655 19.6657 88.2878 19.4903C88.11 19.3056 88.0211 19.0563 88.0211 18.7424C88.0211 18.3176 88.1755 17.9852 88.4842 17.7452C88.8024 17.5051 89.2936 17.385 89.9579 17.385C90.3509 17.385 90.7299 17.4404 91.0948 17.5512C91.4597 17.6621 91.7779 17.7959 92.0492 17.9529Z" fill="#303030" />
                        <path d="M101.343 17.4404H104.655V16.0693H96.4308V17.4404H99.7572V25.903H101.343V17.4404Z" fill="#303030" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M109.928 16.0693H111.416L115.29 25.903H113.634L112.581 23.2299H108.735L107.697 25.903H106.027L109.928 16.0693ZM112.272 22.0803L110.672 17.7729L109.016 22.0803H112.272Z" fill="#303030" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M118.527 16.0693V25.903H120.099V22.482H122.415L124.576 25.903H126.345L124.001 22.1634C124.394 22.0342 124.735 21.8264 125.026 21.5402C125.316 21.2539 125.54 20.9169 125.699 20.5291C125.868 20.132 125.952 19.7119 125.952 19.2687C125.952 18.8717 125.872 18.4838 125.713 18.1053C125.564 17.7267 125.348 17.385 125.068 17.0803C124.796 16.7756 124.473 16.5309 124.099 16.3463C123.725 16.1616 123.313 16.0693 122.864 16.0693H118.527ZM122.85 21.1108H120.099V17.4404H122.766C123.037 17.4404 123.295 17.5235 123.538 17.6898C123.781 17.856 123.978 18.0776 124.127 18.3546C124.277 18.6223 124.352 18.9271 124.352 19.2687C124.352 19.6011 124.286 19.9058 124.155 20.1828C124.024 20.4598 123.847 20.6861 123.622 20.8615C123.397 21.0277 123.14 21.1108 122.85 21.1108Z" fill="#303030" />
                        <path d="M137.028 17.4404H133.716V25.903H132.13V17.4404H128.803V16.0693H137.028V17.4404Z" fill="#303030" />
                        <path d="M147.204 25.903V24.5319H141.941V21.5263H146.39V20.2382H141.941V17.4404H147.078V16.0693H140.369V25.903H147.204Z" fill="#303030" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M150.831 25.903V16.0693H155.168C155.617 16.0693 156.029 16.1616 156.403 16.3463C156.777 16.5309 157.1 16.7756 157.371 17.0803C157.652 17.385 157.867 17.7267 158.017 18.1053C158.176 18.4838 158.256 18.8717 158.256 19.2687C158.256 19.7119 158.171 20.132 158.003 20.5291C157.844 20.9169 157.619 21.2539 157.329 21.5402C157.039 21.8264 156.698 22.0342 156.305 22.1634L158.649 25.903H156.88L154.719 22.482H152.403V25.903H150.831ZM152.403 21.1108H155.154C155.444 21.1108 155.701 21.0277 155.926 20.8615C156.15 20.6861 156.328 20.4598 156.459 20.1828C156.59 19.9058 156.656 19.6011 156.656 19.2687C156.656 18.9271 156.581 18.6223 156.431 18.3546C156.281 18.0776 156.085 17.856 155.842 17.6898C155.598 17.5235 155.341 17.4404 155.07 17.4404H152.403V21.1108Z" fill="#303030" />
                        <path d="M167.588 16.0831V25.903H169.16V22.9391L170.662 21.4017L174.03 25.903H175.813L171.658 20.4183L175.588 16.0693H173.848L169.16 21.1385V16.0831H167.588Z" fill="#303030" />
                        <path d="M178.859 25.903V16.0693H180.43V25.903H178.859Z" fill="#303030" />
                        <path d="M188.688 17.4404H192V16.0693H183.775V17.4404H187.102V25.903H188.688V17.4404Z" fill="#303030" />
                    </svg>
                </div>
                <div class="footer__information">
                    <div class="footer__contact-address">
                        <div class="footer__label">Address</div>
                        <a target="_blank" href="https://maps.google.com/maps?q=Pixo%0A110%20W.%20Main%20St.%0AChampaign%2C%20IL%2061820" class="footer__address">
                            Pixo<br />
                            110 W. Main St.<br />
                            Champaign, IL 61820
                        </a>
                    </div>
                    <div class="footer__contact-phone-and-email">
                        <div class="footer__label">Phone</div>
                        <a href="tel:(217) 344-0444" class="footer__contact-phone">
                            (217) 344-0444
                        </a>
                        <br>
                        <div class="footer__label">Email</div>
                        <a href="mailto:info@pixotech.com" class="footer__contact-email">
                            info@pixotech.com
                        </a>
                    </div>
                </div>
            </div>
            <ul class="footer__links-list">
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link">
                        Additional link
                    </a>
                </li>
            </ul>
            <nav class="footer__social" aria-label="footer social media links">
                <ul class="social-links">
                    <li class="social-links__item">
                        <a href="https://facebook.com" class="social-links__item-link">
                            <span class="social-links__item-text">
                                Facebook page for
                            </span>
                            <svg class="facebook" aria-label="Facebook" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
                                <path class="facebook__logo" fill="#FFF" fill-rule="evenodd" d="M11.976 0h-3.55C4.288 0 2.751 1.887 2.662 5.078l-.004.302v2.483H0v4.135h2.659V24h5.32V11.998h3.55L12 7.863H7.979l.007-2.07c0-1.022.099-1.594 1.521-1.651l.25-.005h2.219V0z" />
                            </svg>
                        </a>
                    </li>
                    <li class="social-links__item">
                        <a href="https://flickr.com" class="social-links__item-link">
                            <span class="social-links__item-text">
                                Flickr profile for
                            </span>
                            <svg class="flickr" aria-label="Flicker photos" xmlns="http://www.w3.org/2000/svg" width="34" height="16" viewBox="0 0 34 16">
                                <path class="flickr__logo" fill="#FFF" fill-rule="evenodd" d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm18 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm0 2c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6z" />
                            </svg>
                        </a>
                    </li>
                    <li class="social-links__item">
                        <a href="https://linkedin.com" class="social-links__item-link">
                            <span class="social-links__item-text">
                                Linked in profile for
                            </span>
                            <svg class="linkedin" aria-label="Linked In" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path class="linkedin__logo" fill="#FFF" fill-rule="evenodd" d="M.605 7.696h4.678v16.302H.605V7.696zm2.22-2.04h-.034C1.098 5.657 0 4.41 0 2.833 0 1.222 1.13 0 2.857 0c1.726 0 2.787 1.219 2.821 2.828 0 1.578-1.095 2.829-2.853 2.829zM24 24h-5.304v-8.438c0-2.208-.83-3.714-2.655-3.714-1.395 0-2.171 1.016-2.533 1.998-.135.35-.114.84-.114 1.332V24H8.14s.068-14.946 0-16.304h5.255v2.558c.31-1.118 1.99-2.715 4.67-2.715 3.324 0 5.936 2.347 5.936 7.395V24z" />
                            </svg>
                        </a>
                    </li>
                    <li class="social-links__item">
                        <a href="https://twitter.com" class="social-links__item-link">
                            <span class="social-links__item-text">
                                Twitter account for
                            </span>
                            <svg class="twitter" width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="twitter__bird" fill-rule="evenodd" clip-rule="evenodd" d="M16.6156 0C13.8968 0 11.6936 2.26058 11.6936 5.04839C11.6936 5.44417 11.7345 5.82984 11.819 6.19818C7.72812 5.98729 4.10072 3.97949 1.67072 0.92301C1.2467 1.67124 1.0044 2.53792 1.0044 3.46237C1.0044 5.21306 1.87357 6.75863 3.19493 7.66575C2.38774 7.63975 1.62846 7.41008 0.96355 7.03452V7.09663C0.96355 9.54355 2.65962 11.5846 4.91495 12.0468C4.50079 12.1652 4.06691 12.2245 3.61613 12.2245C3.29917 12.2245 2.98926 12.1941 2.69061 12.1349C3.31608 14.1398 5.13471 15.6016 7.29002 15.6406C5.6038 16.9955 3.48089 17.8015 1.17485 17.8015C0.777602 17.8015 0.384575 17.7799 0 17.7322C2.17926 19.1637 4.76704 20 7.54781 20C16.6057 20 21.5559 12.3068 21.5559 5.63484C21.5559 5.41528 21.5531 5.19717 21.5432 4.98194C22.5054 4.26982 23.3421 3.38004 24 2.36747C23.1167 2.76903 22.1673 3.04059 21.1727 3.16192C22.1898 2.53792 22.9702 1.54846 23.3365 0.369782C22.3842 0.94901 21.3319 1.3679 20.2092 1.59468C19.3133 0.612451 18.0328 0 16.6156 0Z" fill="#FF552E" />
                            </svg>
                        </a>
                    </li>
                    <li class="social-links__item">
                        <a href="https://instagram.com" class="social-links__item-link">
                            <span class="social-links__item-text">
                                Instagram account for
                            </span>
                            <svg class="instagram" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path class="instagram__camera" fill-rule="evenodd" clip-rule="evenodd" d="M18 0L18.2995 0.00734296C21.3985 0.159666 23.8793 2.66319 23.9957 5.77151L24 6V18L23.9927 18.2995C23.8403 21.3985 21.3368 23.8793 18.2285 23.9957L18 24H6L5.70054 23.9927C2.60154 23.8403 0.120651 21.3368 0.0042705 18.2285L0 18V6L0.00734296 5.70054C0.159666 2.60154 2.66319 0.120651 5.77151 0.0042705L6 0H18ZM17.993 2H6C3.93434 2 2.22293 3.57043 2.02178 5.55026L2.00674 5.74957L2 6V18C2 20.0657 3.57043 21.7771 5.55026 21.9782L5.74957 21.9933L6 22H18C20.0657 22 21.7771 20.4296 21.9782 18.4497L21.9933 18.2504L22 18V6C22 3.93434 20.4296 2.22293 18.4497 2.02178L18.2504 2.00674L17.993 2ZM18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM20 5.5C20 4.67157 19.3284 4 18.5 4C17.6716 4 17 4.67157 17 5.5C17 6.32843 17.6716 7 18.5 7C19.3284 7 20 6.32843 20 5.5Z" fill="#FF552E" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="footer__copyright">Pixo Starter Kit ©. All Rights Reserved</div>
    </div>
</div>
 
<div class="footer">
    <div class="footer__container">
        <div class="footer__wrapper">
            <div class="footer__content">
                <div class="footer__brand">
                    {% include 'bits/logos/starter-kit-logo.twig' %}
                </div>
                <div class="footer__information">
                    {% if contactInfo.address %}
                        <div class="footer__contact-address">
                            <div class="footer__label">Address</div>
                            <a target="_blank"
                               href="https://maps.google.com/maps?q={{ contactInfo.address|url_encode }}"
                               class="footer__address">
                                {{ contactInfo.address|nl2br }}
                            </a>
                        </div>
                    {% endif %}
                    {% if contactInfo.phone or contactInfo.email %}
                        <div class="footer__contact-phone-and-email">
                            {% if contactInfo.phone %}
                                <div class="footer__label">Phone</div>
                                <a href="tel:{{ contactInfo.phone }}" class="footer__contact-phone">
                                    {{ contactInfo.phone }}
                                </a>
                            {% endif %}
                            <br>
                            {% if contactInfo.email %}
                                <div class="footer__label">Email</div>
                                <a href="mailto:{{ contactInfo.email }}" class="footer__contact-email">
                                    {{ contactInfo.email }}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <ul class="footer__links-list">
                {% for item in footerLinks.items %}
                    <li class="footer__links-list-item">
                        <a href="{{ item.url }}" class="footer__links-list-item-link">
                            {{ item.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
            <nav class="footer__social" aria-label="footer social media links">
                {% if
                    contactInfo.facebookLink or
                    contactInfo.flickrLink or
                    contactInfo.linkedInLink or
                    contactInfo.twitterLink or
                    contactInfo.instagramLink or
                    contactInfo.youTubeLink
                %}
                    {% include 'bits/social-links/social-links.twig' %}
                {% endif %}
            </nav>
        </div>
        <div class="footer__copyright">{{ contactInfo.copyright }}</div>
    </div>
</div>
 
{
  "contactInfo": {
    "phone": "(217) 344-0444",
    "email": "info@pixotech.com",
    "address": "Pixo\n110 W. Main St.\nChampaign, IL 61820",
    "copyright": "Pixo Starter Kit ©. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "flickrLink": "https://flickr.com",
    "linkedInLink": "https://linkedin.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "footerLinks": {
    "items": [
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      },
      {
        "title": "Additional link",
        "url": "#"
      }
    ]
  }
}
  • Content: 
    breakpointSmall = 784px
breakpointLarge = 1300px

.footer
    --backgroundColor white
    --iconbackgroundColor charcoal
    --listLinkTextColorActive charcoal
    --listLinkTextColor charcoal

    background-color var(--backgroundColor)
    fluid('padding-top', 64px, 80px)
    fluid('padding-bottom', 64px, 80px)

    &__container
        @extends $contentContainer

    &__wrapper
        +above(breakpointSmall)
            @supports (display: grid)
                display grid
            grid-template-columns 5fr 3fr

        +above(breakpointLarge)
            grid-template-columns 3fr repeat(2, 1fr)

    &__content
        flex 3

        +above(breakpointLarge)
            display flex

    &__social
        flex 2

    &__brand
        margin-bottom 48px

        +above(breakpointSmall)
            flex 0 0 100%

        +above(breakpointLarge)
            flex 1

    &__contact-address
    &__links
        color charcoal
        margin-bottom 24px

    &__contact-address
        color charcoal

        +above(breakpointSmall)
            padding-right 32px
            flex 1

    &__contact-phone-and-email
        +above(breakpointSmall)
            flex 1

    &__contact-address
    &__contact-phone-and-email
        @extends $linkSmall
        margin-bottom 24px
        margin-right 32px
        padding-top 16px
        border-top solid 2px var(--borderColor)

        +below(breakpointSmall)
            margin-right 0

    &__links
        +above(breakpointSmall)
            padding-right 32px
            flex 1

    &__label
    &__copyright
        @extends $detail

    &__contact-phone
    &__contact-email
        display inline-block

    &__contact-phone
        margin-bottom 24px

    &__information
        margin-bottom 48px

        +above(breakpointSmall)
            display flex
            flex-wrap wrap

        +above(breakpointLarge)
            flex 1
            align-content flex-start

    &__links-list
        padding-top 16px
        width 100%

        +below(breakpointLarge)
            display flex
            flex-direction column
            justify-content flex-end
            margin-bottom 48px

    &__links-list-item:not(:last-child)
        margin-bottom 16px

    &__links-list-item-link
        @extends $hypertext
        color var(--listLinkTextColor)

        &:focus
        &:hover
        &:active
            color var(--listLinkTextColorActive)
  • URL: /components/raw/footer/footer.styl
  • Filesystem Path: patterns/partials/footer/footer.styl
  • Size: 2.4 KB

No notes defined.