LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the Template
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
--dxp Styling Hooks
Color --dxp Styling Hooks
Text --dxp Styling Hooks
Site Spacing --dxp Styling Hooks
Map --dxp Styling Hooks to Theme Panel Properties
Enable --dxp Styling Hooks
Brand Custom Components Using --dxp Styling Hooks
Override Component Branding with Custom CSS
Create a Section Color Palette
Add Custom Fonts
Remove SLDS
Add Additional Customizations
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, and link 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 tab of the Theme panel

In addition to button and link text, you can modify the style for several levels of body and heading text, including:
  • Extra Large Heading
  • Large Heading
  • Medium Heading
  • Small Heading
  • Regular Body
  • Small Body

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.

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, the following code sample styles a component’s h1 using the DXP CSS class to utilize the branding property values defined in the Extra Large Heading.

1<template>
2  <h1 class="dxp-text-heading-xlarge">Extra large heading</h1>
3</template>

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

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

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.