Page

<div class="c-page__content">

    <main class="c-page__main">
        The footer is at the bottom even if there is nothing in the page
    </main>

    <footer class="c-footer" aria-label="Pied de page" role="contentinfo">
        <div class="o-container o-container--large">
            <h2 class="u-visually-hidden">Pied de page</h2>

            <div class="c-footer__main">

                <div class="c-footer__page">
                    <h3 class="u-visually-hidden">Liens connexes</h3>
                    <nav aria-label="Navigation pied de page">
                        <ul class="c-footer__list-page">
                            <li><a href="#nowhere">Mentions légales</a></li>
                            <li><a href="#nowhere">Plan du site</a></li>
                            <li><a href="#nowhere">Contact</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="c-footer__social">
                    <h3 class="u-visually-hidden md:u-not-visually-hidden">Partager</h3>
                    <nav aria-label="Navigation réseaux sociaux">
                        <ul class="c-footer__list-social">
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
                                        <path d="M12.5.5C5.9.5.5 5.9.5 12.5s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12zm6 9.7v.4c0 4.5-3.6 8.2-8.1 8.2h-.1c-1.6 0-3.1-.5-4.4-1.3h.7c1.3 0 2.6-.4 3.6-1.2-1.2 0-2.3-.8-2.7-2 .2 0 .4.1.5.1.3 0 .5 0 .8-.1-1.3-.3-2.3-1.5-2.3-2.8.4.2.9.3 1.3.4-.8-.5-1.3-1.4-1.3-2.4 0-.5.1-1 .4-1.5 1.5 1.8 3.6 2.9 6 3-.1-.2-.1-.4-.1-.7 0-1.6 1.3-2.9 2.9-2.9.8 0 1.6.3 2.1.9.6-.1 1.3-.4 1.8-.7-.2.7-.7 1.2-1.3 1.6.6-.1 1.1-.2 1.7-.5-.4.6-.9 1.1-1.5 1.5z" />
                                    </svg>
                                </a></li>
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
                                        <path d="M24.5 12.6c0-6.7-5.4-12.1-12-12.1S.5 5.9.5 12.6c0 5.9 4.3 11 10.1 11.9v-8.4h-3v-3.5h3V9.9c0-3 1.8-4.7 4.5-4.7.9 0 1.8.1 2.7.2v3h-1.5c-.9-.1-1.8.5-1.9 1.5V12.6h3.3l-.5 3.5h-2.8v8.4c5.8-.9 10.1-6 10.1-11.9z" />
                                    </svg>
                                </a></li>
                            <li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </a></li>
                        </ul>
                    </nav>
                </div>

                <div class="c-footer__logo">
                    <h3 class="u-visually-hidden">Logo de l'entité</h3>
                    <img class="c-logo-entity" src="../../assets/images/logo-entity.png" alt="logo de l'entité" />

                </div>

            </div>
            <div class="c-footer__secondary">
                &copy; Name of the service - 2021
            </div>
        </div>
    </footer>

</div>
<div class="c-page__content">

    <main class="c-page__main">
    The footer is at the bottom even if there is nothing in the page
    </main>
    
    {% render '@footer' %}

</div>
/* No context defined. */
  • Content:
    /* ======================================================================
       # _components.page.css
       ====================================================================== */
    
    .c-page {
      @apply
        min-h-screen
        bg-white
      ;
    
      @screen print {
        @apply bg-none;
      }
    }
    
    .c-page__content {
      @apply
        flex
        flex-col
        min-h-screen
      ;
    }
    
    .c-page__main {
      @apply
        flex-grow
        ;
    }
    
  • URL: /components/raw/page/_components.page.css
  • Filesystem Path: src/components/04-Components/page/_components.page.css
  • Size: 398 Bytes

Page

Ce composant pousse le footer en pied de page même si le contenu n’occupe pas toute la hauteur de la page.