I have an LWC that contains an Accordion with specific labels I would like to change the color of part of the label based on specific conditions For example enter image description here

Now what I am trying to achieve is to have the text "UpComing Trip" in green, Past Trip in RED.

My html is pretty basic:

 <lightning-accordion-section name={dataItem.id} label= {dataItem.label}>
                              <div class="slds-card back slds-p-around_small">
                                <div>Country: {dataItem.countryName}</div>
                                <div class="slds-p-top_x-small">Location: {dataItem.locationName}</div>
                                <div class="slds-p-top_x-small">Status: {dataItem.status}</div>
                                <div class="slds-p-top_x-small">Start Date: {dataItem.startDate}</div>
                                <div class="slds-p-top_x-small">End Date: {dataItem.endDate}</div>
                                <div class="slds-p-top_x-small">Bookings:</div>
                                <lightning-accordion allow-multiple-sections-open
                                    <template for:each={dataItem.bookings} for:item="bookingItem">
                                        <div key={bookingItem.id}  class="greenback slds-box slds-box_xx-small slds-m-around_xx-small">
                                            <lightning-accordion-section name={bookingItem.id} label= {bookingItem.id} >
                                                <div class="slds-p-top_x-small">Booking Id: {bookingItem.id}</div>
                                                <div class="slds-p-top_x-small">Start Date: {bookingItem.startDate}</div>
                                                <div class="slds-p-top_x-small">End Date: {bookingItem.endDate}</div>
                                                <div class="slds-p-top_x-small">Agent description: {bookingItem.agent.description}</div>
                                                <div class="slds-p-top_x-small">Agent name: {bookingItem.agent.segmentName}</div>
                                                <div class="slds-p-top_x-small">Main Guest ?: {bookingItem.isMainGuest}</div>
                                                <div class="slds-p-top_x-small">State: {bookingItem.state}</div>
                                                <div class="slds-p-top_x-small" onclick={redirectToWinks}><a>Link to Winks (soon available)</a></div>

Is There a way to achieve that? Is it possible to split label= {dataItem.label} in two divs ?

Thx you ;)

I would like my output to be like: enter image description here

1 Answer 1


Try this ;)

For this you can take help of design hooks.

In the css file of your component add this :host selector and then add the --slds-c-accordion-heading-text-color

:host {
  --slds-c-accordion-heading-text-color: orange;

PS: Here you can find list of all the design hooks for Accordion.

  • Thx you for your answer. I figured this out. What I do not manage is to have this ( check the picture in description )
    – Ben2pop
    Oct 23, 2022 at 6:34

You must log in to answer this question.

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