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 '17 at 20:00
  • very much needed!!! add an idea for it – Itai Shmida Feb 16 '17 at 5:46

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 '17 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 – Balanarayan NT Feb 27 '17 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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