Základní layout patičky

Rozdělení hlavičky na vrchní a spodní část (footer__top, header__footer) podle potřeby

Komponenty pojmenováváme stylem grandparent__child, parent__child. Použítí "__" vícekrát je podle zápisu BEM špatně.

Základní rozvržení patičky

{* Footer - Simple *}

<footer class="footer">
    <div class="footer__content --content --flex">

    </div>
</footer>

{* Footer - Advanced *}

<footer class="footer">

    <div class="footer__top">
        <div class="footer__content --content --flex">

        </div>
    </div>
    <div class="footer__bottom">
        <div class="footer__content --content --flex">

        </div>
    </div>

</footer>

Jak například vypadá footer top?

    <div class="footer__top">
        <div class="footer__content --content --flex">

            {* Footer | Menu *}

            <div class="footer__section --w-12 --w-s-6 --w-l-3">
                <h3 class="footer__title">
                    {$web['FOOTER_RUBRICS_HEADING']}
                </h3>
                <nav class="footer__menu">
                    <ul class="footer__menu-list">
                        {foreach $footerNav as $item}
                            <li class="footer__menu-item">
                                <a class="footer__menu-link --link-rev" href="{$item|link}">
                                    {$item|name|striptags}
                                </a>
                            </li>
                        {/foreach}
                    </ul>
                </nav>
            </div>

		    {* Footer | Menu *}


            <div class="footer__section --w-12 --w-s-6 --w-l-3">
                <h3 class="footer__title">
                    {$web['FOOTER_NAV_HEADING']}
                </h3>
                <nav class="footer__menu">
                    <ul class="footer__menu-list">
                        {foreach $footerNav as $item}
                            <li class="footer__menu-item">
                                <a class="footer__menu-link --link-rev" href="{$item|link}">
                                    {$item|name|striptags}
                                </a>
                            </li>
                        {/foreach}
                    </ul>
                </nav>
            </div>

		{* Footer | Contact *}

            <div class="footer__section --w-12 --w-l-6">
                <h3 class="footer__title footer__title--contact">
                    {$web['FOOTER_CONTACT_HEADING']}
                </h3>

                {* Footer | Contact card *}
                    {include '../modules/contact-card-footer.latte'}
            </div>
        </div>
    </div>

Jak například vypadá footer bottom?

    <div class="footer__bottom">

        <div class="footer__content --content --flex">
            {* Footer | Social *}
            <ul class="footer__social">

                <li class="footer__social-item" n:if="$web['FACEBOOK'] !== '#'">
                    <a class="footer__social-link  icon icon--facebook" href="{$web['FACEBOOK']}">
                        {$web['FACEBOOK_LABEL']}
                    </a>
                </li>
            </ul>

            <div class="footer__copyright">
                {$web['FOOTER_COPYRIGHT']|replace:"%YEAR%":date("Y")|noescape}
            </div>

        </div>
    </div>