lightning-card Salesforce Lightning Web Component(LWC) CSS Updates

lightning-card Salesforce Lightning Web Component(LWC) CSS Updates

Sample Code:

HTML:

<template>
    <lightning-card title="Sample Card">
        Testing Content<br/>
        Testing Content<br/>
        Testing Content<br/>        
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class LightningCard extends LightningElement {}

CSS:

:host {
    --slds-c-card-heading-font-size: 50px;
    --slds-c-card-heading-font-weight: bold;
    --slds-c-card-body-spacing-block-end: 1rem;
    --slds-c-card-body-spacing-block-start: 1rem;
    --slds-c-card-body-spacing-inline-end: 1.5rem;
    --slds-c-card-body-spacing-inline-start: 1.5rem;
}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

For other Sytling Hooks, check the following:

https://www.lightningdesignsystem.com/components/cards/#Styling-Hooks-Overview

Leave a Reply