Add a Page Footer

What You’ll Do

  • Add a footer to your page

Step 1: Add a Footer

Last but not least, let’s add a footer in the form of another Grid System component.

Insert the following code between the <!-- FOOTER --> comments:

<!-- FOOTER -->
<footer role="contentinfo"  class="slds-p-around_large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid_align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

Step 2: Preview

Save your page, and click the Preview button.

Preview of Visualforce page after adding page footer

Summary and Next Steps

You did it! You built a contact list page using the Design System and didn’t have to write a single line of CSS!

The Design System offers many components that were not covered in this project, so check out www.lightningdesignsystem.com for a complete list and continue to make your contact list page even more awesome!

For a more in-depth guided introduction to using the Design System, see our longer Trailhead module.

If you have feedback on this workshop or on any aspect of the Design System, let us know.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities