Card-Mod - Heading Card

Configuration Frontend
1

Have a query about using card-mod with the new “Heading” card type added in 2024.10.

I’ve seen posts on how to style the cards individually, and that works great, but would prefer to apply the styles using the theme support (so it applies to all cards of that type and I don’t have to add to cards individually), but it’s not obvious to me how to target the specific “title” or “subtitle” cards separately (I’m no CSS/web developer).

In the DOM for my HA dashboard I see both title and subtitle cards present with:
<ha-card class="type-heading"> ... </ha-card>
and within that, the type of title set as either
<div class="content title"> ... </div>
or
<div class="content subtitle"> ... </div>
around the card icon and text.

I get that I could set CSS at the card level based on the ha-card class, but that would affect both title and subtitle cards, or I could set CSS on the div based on title/subtitle, but that would only apply to the card icon and text, and not the card itself.

Is there a way that I can select based on whether the content of the card is title/subtitle, but then apply CSS to the card as a whole?

2

Suggest to ask similar questions in the main card-mod thread.
Also, the 1st post of this thread has a link at the bottom which leads to a list of examples (incl. Heading).

3

Thanks. I’ll repost on that thread as well.
I did already see the list of examples, including the Header card - that was my reference for the changes I’ve already made - this is specifically for how I only apply the CSS to the particular card type from a theme.
Thanks!