Vebego Component Library

Footer 

<footer class="org-footer">
    <div class="vebego-container">
        <div class="footer-top">
            <div class="footer-column">
                <div class="logo">
                    <img src="../../assets/img/logo_hago.svg" />
                </div>
                <div class="company-info">Vooruitstrevend, klaar voor de toekomst en trots om een rol te mogen spelen in het leven van vrijwel iedereen, op vele momenten.</div>
            </div>
            <div class="footer-column grid grid-cols-2 gap-8">
                <div>
                    <div class="mol-footer-link-list">
                        <h6 class="atm-heading ">Over ons</h6>

                        <ul>
                            <li>
                                <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Over Vebego</a>
                            </li>
                            <li>
                                <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Werken bij Vebego</a>
                            </li>
                            <li>
                                <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div class="mol-footer-text">
                        <h6 class="atm-heading ">Contact</h6>

                        <div class="atm-paragraph ">Larixplein 6</br>5616 VB Eindhoven</br>088 - 099 08 90</br><a href="info@hago.nl">info@hago.nl</a></div>

                    </div>
                </div>
            </div>
            <div class="footer-column">
                <div class="mol-footer-newsletter">
                    <h6 class="atm-heading ">Nieuwsbrief</h6>

                    <div class="atm-form-input  ">
                        <input class="form-input" type="text" id="input" name="input">
                        <label class="atm-form-label form-label " for="input">E-mailadres</label>

                        <span class="atm-icon form-input-error-icon far fa-times   "></span>
                        <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                    </div>

                    <a class="atm-button atm-button-primary button-md  ">
                        <span class="button-content">
                            <span>Aanmelden</span>

                        </span>
                        <span class="button-triangle"></span>
                    </a>

                </div>

                <ul class="mol-social-media horizontal ">
                    <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon  fab fa-facebook-f  fa-lg "></span></a></li>
                    <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon  fab fa-instagram  fa-lg "></span></a></li>
                    <li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon  fab fa-twitter  fa-lg "></span></a></li>
                    <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon  fab fa-youtube  fa-lg "></span></a></li>
                    <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon  fab fa-linkedin-in  fa-lg "></span></a></li>
                    <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"><span class="atm-icon  fab fa-whatsapp  fa-lg "></span></a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-column first">
                \ A Vebego family company. © 2020 Hago Nederland.
            </div>
            <div class="footer-column second">
                <nav class="mol-footer-utils">
                    <ul data-reset-text="Reset cookies">
                        <li><a class="atm-link " href="#" title="Privacy statement" aria-label="" target="">Privacy statement</a></li>
                        <li><a class="atm-link " href="#" title="Disclaimer" aria-label="" target="">Disclaimer</a></li>
                        <li><a class="atm-link " href="#" title="Reset cookies" aria-label="" target="">Reset cookies</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</footer>
 
<footer class="org-footer">
    <div class="vebego-container">
        <div class="footer-top">
            <div class="footer-column">
                <div class="logo">
                    <img src="{{path '/assets/img/logo_hago.svg'}}" />
                </div>
                <div class="company-info">{{companyText}}</div>
            </div>
            <div class="footer-column grid grid-cols-2 gap-8">
                <div>{{render '@footer-link-list'}}</div>
                <div>{{render '@footer-text'}}</div>
            </div>
            <div class="footer-column">
                {{render '@footer-newsletter'}}
                {{render '@social-media'}}        
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-column first">
                \ A Vebego family company. {{copyrightText}}
            </div>
            <div class="footer-column second">
                {{render '@footer-utils'}}
            </div>
        </div>
    </div>
</footer>
 
{
  "copyrightText": "© 2020 Hago Nederland.",
  "companyText": "Vooruitstrevend, klaar voor de toekomst en trots om een rol te mogen spelen in het leven van vrijwel iedereen, op vele momenten."
}
  • Content: 
    .org-footer {
    @apply flex;
    @apply justify-center;
    @apply w-full;
    @apply py-10 lg:py-20;
    @apply border-t border-solid border-shade;

    .footer-top {
        @apply grid;
        @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
        @apply gap-8;

        .footer-column {
            &.linkcolumn {
                @apply grid md:grid-cols-2 gap-6;
            }
        }

        .logo {
            @apply pb-4;
            @apply text-left;

            img {
                @apply h-16;
            }
        }

        .company-info {
            @apply lg:max-w-xs;
        }

        .mol-footer-newsletter {
            @apply mb-6;
        }

        .mol-social-media {
            @apply lg:float-right;

            li:last-child {
                @apply lg:m-0;
            }
        }
    }

    .footer-bottom {
        @apply grid;
        @apply grid-cols-1 md:grid-cols-2 gap-4 lg:gap-8;
        @apply pt-10;

        .footer-column {
            &.second {
                .mol-footer-utils ul {
                    @apply md:justify-end;
                }
            }
        }
    }
}
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: src\components\04-organisms\footer\footer.css
  • Size: 1.2 KB

No notes defined.