1

As the title says, what is the best way to change the font size and style of a lightning-card title. I have tried the following...

1) First, using these Styling Hooks on a lightning card...

:host {
    --slds-c-card-color-background: lightblue;
    --slds-c-card-heading-font-size: 2rem;
    --slds-c-card-sizing-border: 5px;
    --slds-c-card-heading-font-weight: 100;
}

All of them are applied except for --slds-c-card-heading-font-size, any ideas why? Additionally, there is no styling hook to change the header font.

2) I have found no other way to select the title of the lightning-card, and have tried many CSS selectors, including... lightning-card, lightning-card[title], .slds-card, and .slds-card__header-title

3) From my understanding, using the Base Card Structure that starts with the HTML <article class="slds-card"> instead of using <lightning-card title="TitleToChangeFontOf"> would be equivalent, but I was hoping to avoid that because I imagine it would be harder to maintain, even though it might make it easier to select the title. Worst-case I could do this, but is there any downsides to be aware of?

Thanks!

1 Answer 1

1

title is actually a slot, so you can force whatever styles you want directly into it.

<lightning-card>
  <h1 slot="title" style="font-size: 2em;">I am twice as large</h1>
</lightning-card>

This allows you to use most of the default card styles while being able to completely customize the slotted content.

The documentation suggests that you should use a header or h1 tag, not an article tag.

2
  • Thank you for the quick reply! That worked. One follow up question, I'm slightly thrown off by the Base Card Structure in bullet 3 of my question. Is there ever a good reason to use that HTML structure over the <lightning-card> way?
    – louis
    Feb 9 at 23:35
  • 1
    @louis The reason for the blueprint is when you don't have the standard library available (e.g. you want to run a Heroku site that looks like SLDS).
    – sfdcfox
    Feb 10 at 0:15

You must log in to answer this question.

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