Footer

The Footer component provides a reusable pattern for footer in the interface.

Footer

Renders a footer in default mode with a logotype and grouped navigation links.

<!-- footer.blade.php -->
<footer class="c-footer" data-uid="69f0d17943cd3" data-component="footer">
            <div class="g-divider g-divider--lg"></div>
        <div class="c-footer__body">
            <a href="" class="c-footer__home-link">
                <img id="logotype" src="/assets/img/logotype-grey-full.svg" alt="Go to homepage">
            </a>
            <div class="c-footer__nav">
                                    
                                                                            <div class="c-footer__links">
                                                                <!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h4" data-uid="69f0d17943d64" data-component="typography">
    About
</h2>                                                        <div class="c-footer__links">
                                                                    <a target="_self"
                                        href="/about/styleguide-structure">The styleguide</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_self"
                                        href="/components">Atomic design</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_self"
                                        href="about/authors">Authors</a>

                                                                                                </div>

                        </div>
                                            <div class="c-footer__links">
                                                                <!-- typography.blade.php   original: h4 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="69f0d17943dba" data-component="typography">
    Documentation
</h3>                                                        <div class="c-footer__links">
                                                                    <a target="_self"
                                        href="/components">Components</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_self"
                                        href="/icons">Icons</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_self"
                                        href="/script">Scripts</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_self"
                                        href="/utilities">Utilities</a>

                                                                                                </div>

                        </div>
                                            <div class="c-footer__links">
                                                                <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="69f0d17943dfe" data-component="typography">
    Links
</h4>                                                        <div class="c-footer__links">
                                                                    <a target="_blank"
                                        href="https://github.com/helsingborg-stad/styleguide">Github (Styleguide)</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_blank"
                                        href="https://github.com/helsingborg-stad/blade-component-library">Github (Component Library)</a>

                                                                            <span class="c-footer__link-divider"></span>
                                                                                                        <a target="_blank"
                                        href="https://getmunicipio.com">Helsingborg.se</a>

                                                                                                </div>

                        </div>
                                                </div>
        </div>
    
    </footer>

@footer([
    'logotype' => '/assets/img/logotype-grey-full.svg',
    'links' => [
        'About' => [
            'The styleguide' => ['href' => '/about/styleguide-structure'],
            'Atomic design' => ['href' => '/components'],
            'Authors' => ['href' => 'about/authors']
        ],
        'Documentation' => [
            'Components' => ['href' => '/components'],
            'Icons' => ['href' => '/icons'],
            'Scripts' => ['href' => '/script'],
            'Utilities' => ['href' => '/utilities']
        ],
        'Links' => [
            'Github (Styleguide)' => ['target' => '_blank', 'href' => 'https://github.com/helsingborg-stad/styleguide'],
            'Github (Component Library)' => ['target' => '_blank', 'href' => 'https://github.com/helsingborg-stad/blade-component-library'],
            'Helsingborg.se' => ['target' => '_blank', 'href' => 'https://getmunicipio.com'],
        ]

    ]
])
@endfooter

Footer with slot content

Renders the footer in slot-only mode, where arbitrary content is placed inside the component tags instead of using the built-in links structure.

<!-- footer.blade.php -->
<footer class="c-footer" data-uid="69f0d179441a2" data-component="footer">
    
        <div class="c-footer__main-wrapper ">

            
            
            <div class="o-container">
        <div class="o-grid-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

            
            
        </div>
    
    </footer>

@footer([
    'slotOnly' => true,
    'logotype' => '',
])
    <div class="o-container">
        <div class="o-grid-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
@endfooter

Footer with subfooter

Renders the footer with a subfooter bar containing a list of contact items, demonstrating the subfooter section with horizontal layout.

<!-- footer.blade.php -->
<footer class="c-footer" data-uid="69f0d17944549" data-component="footer">
    
        <div class="c-footer__main-wrapper ">

            
            
            <div class="o-container">
        <div class="o-grid-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

            
            
        </div>
    
    <div class="c-footer__subfooter c-footer__subfooter--horizontal c-footer__subfooter--align-center">
    <div class="o-container">
        <div class="c-footer__subfooter__wrapper">
                        <ul class="c-footer__subfooter__list">
                                    <li>
                        <strong>Phone</strong>
                                                        <a class="c-link" href="tel:0421050000" target="_top" data-uid="69f0d17944a43" data-component="link">
        042-10 50 00
    </a>
                                            </li>
                                    <li>
                        <strong>Email</strong>
                                                        <a class="c-link" href="mailto:info@example.se" target="_top" data-uid="69f0d17944a91" data-component="link">
        info@example.se
    </a>
                                            </li>
                                    <li>
                        <strong>Visit us</strong>
                                                    Stortorget 1, 251 89 Helsingborg
                                            </li>
                            </ul>
        </div>
    </div>
</div></footer>

@footer([
    'slotOnly' => true,
    'logotype' => '',
    'subfooter' => [
        'flexDirection' => 'row',
        'alignment' => 'center',
        'content' => [
            ['title' => 'Phone', 'content' => '042-10 50 00', 'link' => 'tel:0421050000'],
            ['title' => 'Email', 'content' => 'info@example.se', 'link' => 'mailto:info@example.se'],
            ['title' => 'Visit us', 'content' => 'Stortorget 1, 251 89 Helsingborg', 'link' => false],
        ]
    ]
])
    <div class="o-container">
        <div class="o-grid-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
@endfooter

Footer with prefooter and postfooter

Renders the footer in slot-only mode with prefooter content placed above and postfooter content placed below the main slot area.

<!-- footer.blade.php -->
<footer class="c-footer" data-uid="69f0d17944dda" data-component="footer">
    
        <div class="c-footer__main-wrapper ">

            
                            <div class="c-footer__prefooter-wrapper">
                    <div class="o-container">
                        <div class="o-grid-12">
                            This content is placed before the main footer area via the prefooter parameter.
                        </div>
                    </div>
                </div>
            
            <div class="o-container">
        <div class="o-grid-12">
            <p>Main footer slot content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

            
                            <div class="c-footer__postfooter-wrapper">
                    <div class="o-container">
                        <div class="o-grid-12">
                            This content is placed after the main footer area via the postfooter parameter.
                        </div>
                    </div>
                </div>
            
        </div>
    
    </footer>

@footer([
    'slotOnly' => true,
    'logotype' => '',
    'prefooter' => 'This content is placed before the main footer area via the prefooter parameter.',
    'postfooter' => 'This content is placed after the main footer area via the postfooter parameter.',
])
    <div class="o-container">
        <div class="o-grid-12">
            <p>Main footer slot content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
@endfooter

API

Parameter	Default	Description
componentElement	footer	-
slotOnly	false	-
id		-
logotype	/	-
logotypeHref		-
links	[]	-
subfooterLogotype		-
prefooter		-
postfooter		-
footerareas		-

CSS API

Variable	Default	Type	Values	Description
--c-footer--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-footer--border-width	var(--border-width)	range	-	Size
--c-footer--color--surface	var(--color--surface)	color	-	Surface
--c-footer--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-footer--home-link-height-multiplier	1	range	-	Scales the footer home link height locally without changing global sizing.

Similar components

Logotype Logotype Grid