Footer | siimple css

Footer

A basic component for displaying content in the bottom of your page

To create a footer, simply add the class siimple-footer to a div:

<div class="siimple-footer" align="center">
    Made with love by <strong>siimple</strong>
</div>

Sizing

Change the size of the footer component adding the classg siimple-footer--[SIZE]

<div class="siimple-footer siimple-footer--medium" align="center">
    Made with love by <strong>siimple</strong>
</div>

Colored footer

Use siimple-footer--light or siimple-footer--dark to switch the footer to a light or dark theme.

<div class="siimple-footer siimple-footer--dark" align="center">
    Made with love by <strong>siimple</strong>
</div>

<div class="siimple-footer siimple-footer--light" align="center">
    Made with love by <strong>siimple</strong>
</div>

Footer title

Added in v3.2.0

You can turn an element inside your footer to a footer title adding a siimple-footer-title class.

<div class="siimple-footer siimple-footer--light" align="center">
    <div class="siimple-footer-title">My company</div>
</div>

Footer subtitle

Added in v3.2.0

Display a subtitle in your footer with siimple-footer-subtitle class.

<div class="siimple-footer siimple-footer--light" align="center">
    <div class="siimple-footer-title">My company</div>
    <div class="siimple-footer-subtitle">
        We make great things!
    </div>
</div>

Footer links

Added in v3.2.0

You can style your footer links using the class siimple-footer-link. By default, links will be displayed as a block, but you can display inline links adding the siimple-footer-link--inline modifier.

<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--8">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--4">
            <a href="#" class="siimple-footer-link">Link 1</a>
            <a href="#" class="siimple-footer-link">Link 2</a>
            <a href="#" class="siimple-footer-link">Link 3</a>
        </div>
    </div>
</div>

You can also display a small link description adding a div element inside the link with a siimple-footer-link-description.

<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--8">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--4">
            <a href="#" class="siimple-footer-link">
                Link 1
                <div class="siimple-footer-link-description">
                    Link 1 description
                </div>
            </a>
            <a href="#" class="siimple-footer-link">
                Link 2
                <div class="siimple-footer-link-description">
                    Link 2 description
                </div>
            </a>
            <a href="#" class="siimple-footer-link">
                Link 3
                <div class="siimple-footer-link-description">
                    Link 3 description
                </div>
            </a>
        </div>
    </div>
</div>

Footer group

Added in v3.2.0.

Use siimple-footer-group to style your links group title.

<div class="siimple-footer siimple-footer--light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--6">
            <div class="siimple-footer-title">My company</div>
            <div class="siimple-footer-subtitle">We make great things!</div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--3">
            <div class="siimple-footer-group">Group 1</div>
            ...
        </div>
        <div class="siimple-grid-col siimple-grid-col--3">
            <div class="siimple-footer-group">Group 2</div>
            ...
        </div>
    </div>
</div>

Footer rule

Added in v3.2.0.

Add siimple-footer-rule to an element to display an horizontal rule.

Found a mistake or want to help improve this documentation? Suggest changes.