LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
Enable --dxp Styling Hooks
--dxp Styling Hooks in LWR Sites
Color --dxp Styling Hooks
Text --dxp Styling Hooks
Site Spacing --dxp Styling Hooks
How --dxp Styling Hooks Map to Theme Panel Properties
Use --dxp Styling Hooks in Custom Components
Override Component Branding in LWR Sites with Custom CSS
Create a Color Palette for Page Sections and Columns
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Text --dxp Styling Hooks

Extensive text branding properties make it easy to control the styling of the headings, body, button, link, and forms text used throughout your site.

The Base Font Size property defines the font size for the <html> element of your site. So when its value is changed, it also affects every other font size property.

The Text panel in Experience Builder Themes

In addition to text for buttons, links, and forms, you can modify the style for several levels of heading and body text, including:

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6
  • Paragraph 1
  • Paragraph 2

You can configure each of these text styles declaratively in the Theme panel or programmatically via --dxp styling hooks. When you change the values for these properties, it also affects the SLDS and DXP CSS classes that consume them.

Override heading tags associated with each style at the component level. For example, if your text component has a Heading 1 style (associated with an h1 tag), change the tag to h2 if needed.

Note

To use these text properties in your components, use either SLDS or DXP CSS classes, or use the --dxp styling hook directly in the component’s CSS.

For example, this code sample styles a component’s h1 using the DXP CSS class to use the branding property values defined in the Extra Large Heading.

<template>
  <h1 class="dxp-text-heading-xlarge">Heading 1</h1>
</template>

Alternatively, you can use the --dxp styling hooks directly in the component’s CSS:

h1 {
  font-size: var(--dxp-s-text-heading-extra-large-font-size);
  font-family: var(--dxp-s-text-heading-extra-large-font-family);
}

To alter the Base Font Size for small form factors, such as Tablet Portrait or Mobile, you can set the value of --dxp-s-html-font-size-mobile programmatically.