FlexCard Notes #1: Experience Cloud CSS Styling Hooks

Building a FlexCard for an Experience Cloud site? Use these styling hooks to inherit colors defined in the Experience Builder. This post is part of the FlexCard Design Thinking mini series.

I’m currently building some FlexCards for an Experience Cloud site, but I live in fear of the day I decide to update my Experience Cloud site’s branding, and all my cards don’t fit in anymore. No one wants to manually update each and every card whenever a color changes.

I would much rather inherit things like color, so I never have to adjust my cards (at least for that reason).

So, I dug through the CSS output of an Experience Cloud site and found the styling hooks you can use to access your site’s colors. There are hundreds of styling hooks (for your site, your CSS overrides, and the Lightning Design System), but I just grabbed the ones associated to the color palette you configure in Experience Builder:

Text Color
color:var(--lwc-colorTextDefault);

Detail Text Color
color: var(--lwc-colorTextWeak);

Action Color
color:var(--lwc-colorTextActionLabelActive);

Link Color
color:var(--lwc-brandTextLink);

Overlay Text Color
color:var(--lwc-colorTextBrandPrimary);

Border Color
border-color:var(--lwc-colorBorder);

Page Background Color
background:var(--lwc-dxpGRoot);

How To Use

When you’re building your FlexCard:

  1. Select the element you want to style (like Block, Text, etc.).
  2. On the Style tab, add one of the CSS snippets (above) to the Inline CSS Styles section.
  3. Activate your card. You will only see the effect of the styling hook once you have added your active FlexCard to an Experience Cloud site page. Unfortunately, that means it’s tedious to test, but luckily you can do so by previewing your changes in Experience Builder (no need to publish your site changes to see if it worked).

In theory, these should make your FlexCards fit in with whatever branding set has been assigned for the audience of the current Experience Cloud user. You can probably extend this idea to do more than color, but I’m taking baby steps.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: