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.