There are now many lightning:... components listed in the Lightning Components Developer Guide Component Reference that generate SLDS markup and standard icons. This is good news, potentially making consistent SLDS styling much less tedious to achieve.

I am wondering if there is any Salesforce or 3rd party documentation that goes further such as:

  • a visual reference i.e. what each component looks like in a page
  • examples of standard ways to compose these components into common layouts
  • This page has visual examples and usage guidance. Doesn't seem to be what you're looking for though, since it doesn't reference those components specifically.
    – Adrian Larson
    Feb 15, 2017 at 20:00
  • very much needed!!! add an idea for it Feb 16, 2017 at 5:46

2 Answers 2


As of not too long ago (2018)

the component-library overview seems to do just that, including:

  • code blueprint with different modalities (like the SLDS Doc)
  • a Visual Representation
  • the Reference Doc
  • Searchable interface with filters for different interfaces

enter image description here

Forgot to mention -> the new Auradocs, now adopt the same format as the above component documentation, however, the URL is now:



You can check the Lightning Design System website for previews. They have linked directly to each of these reference points in every 'lightning:' pages. The exact wording used would be something on the lines of, 'This component inherits styling from ____ in the Lightning Design System.'

Lightning:card for example can be previewed here.

  • Thanks, I should have said in the question that I am familiar with that web site. Was hoping for something more like a component cheat sheet.
    – Keith C
    Feb 20, 2017 at 9:51
  • Ah yes, I get it @KeithC even I get sick of back and forths very often. Should put it as a Salesforce Idea for now I think Feb 27, 2017 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.