Add a Page Footer
- Add a footer to your page
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">© Your Name Here</p> </div> <!-- / LAYOUT GRID --> </footer> <!-- / FOOTER -->
Save your page, and click the Preview button.
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.