Styling Web Components using Salesforce Lighting Design System (SLDS)

Styling Web Components using Salesforce Lighting Design System (SLDS)


This post is continuation of Developing Your First Simple Lighting Web Component

In previously developed component, we will add styles using SLDS classes. More classes canbe explored at  https://www.lightningdesignsystem.com/.

Add below changes in helloWorld html file and push the changes.



Check ORG for the changes. We can see style of helloWorld component has changed.



To have some offset around Hello, World, add below dive inside main dive to indicate the inner div as element of main slds-card div.




Push the changes and see the difference, now you can notice some offset.



To add padding, you can add slds-p-vertical_small in inner div and see the difference.



Comments