View on GitHub

Footer

Documentation and examples for a powerful and responsive Boosted Innovation Cup’s footer. It includes support for branding, navigation and more.

On this page

How it works

Our footer is basically a <footer> tag with a .bg-dark class. It comes with 5 ready-to-use fully responsive bars which should be arranged vertically in the following order:

Title with content bar
Follow us bar
Navigation bar
Service bar
Terms and conditions mandatory bar

You can choose to display each part or not, except the last one which is mandatory. No matter how many parts you use, they should follow the order listed above.

If these available parts don’t meet your specific needs, feel free to develop your own custom part

This footer component is based on the navbar component. Don’t forget to import the corresponding SCSS file if you’re using Lean Sass imports.

Example

The <h2></h2> and <h3></h3> tags used in the following sections are informative, you need to adapt those to your website’s title hierarchy.

The footer bars are independent from each other. Just add a dark separator between each bar of the final footer.

<div class="border-bottom border-1 border-dark"></div>

Title with content bar

This footer bar is a container with a .footer-title-content class. This container includes a title and a .row container in which to add your content. See below an example with a mail form content.

html

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-title-content">
    <h3 class="footer-heading">Sign up to our mailing list</h3>
    <div class="row">
      <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
        <label for="inputEmail" class="visually-hidden">Email</label>
        <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail" placeholder="Enter your email">
        <button type="submit" class="btn btn-secondary btn-inverse text-nowrap">Sign up</button>
      </form>
    </div>
  </div>
</footer>

Follow us bar

This footer bar is a container with .footer-social class into which a list of social media icons can be added:

html

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-social">
    <h3 class="footer-heading me-md-3">Follow us</h3>
    <ul class="navbar-nav gap-2 flex-row align-self-start">
      <li><a href="#" class="btn btn-icon btn-social btn-twitter btn-inverse"><span class="visually-hidden">Twitter</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-facebook btn-inverse"><span class="visually-hidden">Facebook</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-instagram btn-inverse"><span class="visually-hidden">Instagram</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-whatsapp btn-inverse"><span class="visually-hidden">WhatsApp</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-linkedin btn-inverse"><span class="visually-hidden">LinkedIn</span></a></li>
      <li><a href="#" class="btn btn-icon btn-social btn-youtube btn-inverse"><span class="visually-hidden">YouTube</span></a></li>
    </ul>
  </div>
</footer>

This footer bar is a container with a .footer-nav class meant to contain navigation links organized in columns. You can add several categories in one footer-column by adding either accordion items or their content directly inside the columns. You can also adjust every column size depending on the breakpoint. Try to have equal sized columns height and it will wrap nicely.

This container needs our Collapse JavaScript plugin to work properly.

Depending on the screen size and for accessibility concerns, you need to write each category title in 2 different ways:

<h3 class="accordion-header footer-heading" id="headingOne2">

  <!-- For small screens -->
  <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
    Category
  </button>

   <!-- For large screens -->
  <span class="d-none d-md-flex">Category</span>
</h3>

html

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-nav">
    <nav class="accordion accordion-dark" id="accordion2" aria-label="Sitemap footer 2">
      <div class="row">
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingOne2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseOne2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingOne2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingTwo2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="true" aria-controls="collapseTwo2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseTwo2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingTwo2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingThree2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="true" aria-controls="collapseThree2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseThree2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingThree2">Subcategory</a></li>
            </ul>
          </div>
        </div>
        <div class="footer-column col-md-3">
          <h3 class="accordion-header footer-heading" id="headingFour2">
            <button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour2" aria-expanded="true" aria-controls="collapseFour2">
              Category
            </button>
            <span class="d-none d-md-flex">Category</span>
          </h3>
          <div id="collapseFour2" class="container-xxl accordion-collapse collapse" data-bs-parent="#accordion2">
            <ul class="navbar-nav">
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
              <li><a class="nav-link" href="#" aria-describedby="headingFour2">Subcategory</a></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</footer>

Service bar

The footer is a container with a .footer-service class. Its purpose is to display customer services links.

html

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-service">
    <ul class="navbar-nav gap-3 gap-md-4">
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#locate"/></svg><span>Store locator</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#coverage"/></svg><span>Coverage checker</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#contact"/></svg><span>Contact us</span></a></li>
      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#protection"/></svg><span>Child protection</span></a></li>
    </ul>
  </div>
</footer>

Mandatory terms and conditions bar

The footer is a container with a .footer-terms class. This footer bar is mandatory in every footer and should come as the last bar of the footer.

html

<footer class="footer bg-dark navbar-dark">
  <h2 class="visually-hidden">Sitemap & information</h2>
  <div class="container-xxl footer-terms">
    <ul class="navbar-nav gap-md-3">
      <li class="fw-bold">© Orange 2022</li>
      <li><a class="nav-link" href="#">Terms and conditions</a></li>
      <li><a class="nav-link" href="#">Privacy</a></li>
      <li><a class="nav-link" href="#">Accessibility statement</a></li>
      <li><a class="nav-link" href="#">Cookie policy</a></li>
    </ul>
  </div>
</footer>

CSS

Variables

As part of Boosted Innovation Cup’s evolving CSS variables approach, footers use local CSS variables on every footer part for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

    --#{$prefix}footer-gap: 0;
    --#{$prefix}footer-padding-top: 0;
    --#{$prefix}footer-padding-bottom: 0;
    --#{$prefix}footer-title-margin-bottom: 0;
    --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
    --#{$prefix}footer-title-font-weight: #{$footer-title-font-weight};
    --#{$prefix}footer-title-line-height: #{$footer-line-height-md};
    --#{$prefix}footer-title-letter-spacing: #{$footer-letter-spacing};

Each bar redefines its own CSS variables.

Some additional CSS variables are also present on .footer-title-content:

    --#{$prefix}footer-padding-top: #{$footer-title-content-padding-top};
    --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom};
    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};

and from the medium breakpoint:

      --#{$prefix}footer-padding-bottom: #{$footer-title-content-padding-bottom-md};

Some additional CSS variables are also present on .footer-social:

    --#{$prefix}footer-padding-top: #{$footer-social-padding-top};
    --#{$prefix}footer-padding-bottom: #{$footer-social-padding-bottom};
    --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom};
    --#{$prefix}footer-title-font-size: #{$footer-font-size-sm};
    --#{$prefix}footer-title-line-height: #{$footer-line-height-sm};

and from the medium breakpoint:

      --#{$prefix}footer-padding-top: #{$footer-social-padding-top-md};
      --#{$prefix}footer-title-margin-bottom: #{$footer-social-title-margin-bottom-md};
      --#{$prefix}footer-title-font-size: #{$footer-font-size-md};
      --#{$prefix}footer-title-line-height: #{$footer-line-height-md};

Some additional CSS variables are also present on .footer-nav:

    --#{$prefix}footer-gap: #{$footer-gap-xl};

from the medium breakpoint:

      --#{$prefix}footer-gap: #{$footer-gap};
      --#{$prefix}footer-padding-top: #{$footer-nav-padding-top};
      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-md};
      --#{$prefix}footer-title-margin-bottom: #{$footer-title-margin-bottom-md};

and from the large breakpoint:

      --#{$prefix}footer-padding-bottom: #{$footer-nav-list-padding-bottom-lg};

Some additional CSS variables are also present on .footer-service:

    --#{$prefix}footer-padding-top: #{subtract($footer-service-padding-y, .0625rem)};
    --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y};

and from the medium breakpoint:

      --#{$prefix}footer-padding-top: #{add($footer-service-padding-y-md, .0625rem)};
      --#{$prefix}footer-padding-bottom: #{$footer-service-padding-y-md};

Some additional CSS variables are also present on .footer-terms:

    --#{$prefix}footer-padding-top: #{$footer-terms-padding-top};
    --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-bottom};
    --#{$prefix}footer-gap: #{$footer-gap-xl};

and from the medium breakpoint:

      --#{$prefix}footer-padding-top: #{$footer-terms-padding-y-md};
      --#{$prefix}footer-padding-bottom: #{$footer-terms-padding-y-md};

Sass Variables

For more details, please have a look at the exhaustive list of available variables:

$footer-font-size-sm:                     $font-size-sm;
$footer-line-height-sm:                   $line-height-sm;
$footer-font-size-md:                     $font-size-base;
$footer-line-height-md:                   $line-height-base;
$footer-title-font-weight:                $font-weight-bold;
$footer-letter-spacing:                   $letter-spacing-base;
$footer-accordion-line-height:            $spacer * 1.45;
$footer-nav-link-font-weight:             $font-weight-bold;

$footer-title-content-padding-top:        $spacer * 1.25;
$footer-title-content-padding-bottom:     $spacer * 1.45;
$footer-title-content-padding-bottom-md:  $spacer * 1.95;
$footer-title-margin-bottom:              $spacer * .85;

$footer-social-padding-top:               $spacer * .85;
$footer-social-padding-top-md:            $spacer * 1.5;
$footer-social-padding-bottom:            $spacer * 1.45;
$footer-social-title-margin-bottom-md:    $spacer * .1;

$footer-title-margin-bottom-md:           $spacer * 1.05;
$footer-nav-padding-top:                  $spacer * 1.55;
$footer-nav-list-padding-top:             $spacer * .85;
$footer-nav-list-padding-top-md:          $spacer * .05;
$footer-nav-list-padding-bottom:          $spacer * 1.3;
$footer-nav-list-padding-bottom-md:       $spacer * 1.75;
$footer-nav-list-padding-bottom-lg:       $spacer * 2;

$footer-service-padding-y:                $spacer;
$footer-service-padding-y-md:             $spacer * 1.2;
$footer-service-link-padding-top:         $spacer * .1;

$footer-terms-padding-top:                $spacer * .85;
$footer-terms-padding-bottom:             $spacer * 1.35;
$footer-terms-padding-y-md:               $spacer * 1.1;

$footer-gap:                              $spacer * .75;
$footer-gap-xl:                           $spacer * 1.7;

Footer

How it works

Example

Footer bars

Title with content bar

Follow us bar

Navigation bar

Service bar

Mandatory terms and conditions bar

CSS

Variables

Sass Variables