I am making a custom accordian and want to apply the same CSS as the Salesoforce standard page . Is is possible in LWC Cmp with the help of custom CSS. kindly help me.

enter image description here

Custom --

Expected to make look like enter image description here

I am trying with the below approach but not working.

<lightning-accordion allow-multiple-sections-open active-section-name={activeSections}>
                <lightning-accordion-section name='Key Information' label='Key Information' style='background-color: rgb(223, 223, 223);'>

Issue -- It is applied to complete section till the bottom.

1 Answer 1


You can follow the Lightning Desing System the develop a custom accordion.

Here you can find different examples and styling hooks to modify look as per your requirements.

To change the background colour of the accordion section header use styling hook below:

:host {
--slds-c-accordion-summary-color-background: rgb(223, 223, 223);

enter image description here

  • 1
    Thanks @Tushar Jadav
    – Shekher
    Commented Apr 18 at 13:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .