Footers

The footer must be included on all pages created using this design system. The footer includes copyright information and personal logo


Footer Example

The following footer example is responsive. Adjust the browser size to view responsive behaviors.

© 2023 SBUX Website | 2023

Accessibility Considerations

Be sure to use the colors specified in the color palette section to ensure accessible contrast ratio. Icons should include descriptive alt attributes that tell users where the link will direct them.


Usage

  • A footer must be included in all pages created within this design system.

Code Example

<footer class="footer p-4 border-top border-dark border-1">
                  <div class="container-fluid">
                    <div class="row">
                          <div class="col-8 text-lg-left">
                              <span class="text-footer">© 2023 SBUX Website | 2023</span>
                          </div>
                          <div class="col-12 col-lg-4 text-lg-right">
                              <a class="d-inline pr-1" href="#">
                              <img src="../img/SB Logo 2 1.svg" width="50" alt="Logo">
                              </a>
                          </div>
                      </div>
                  </div>
                </footer>