Font size for paragraph component

UI Builder
1

I’m creating some dynamic html content and display it using the paragraph component.
Now, I wanted to change the default font size for text to display. In the SDK styles, I’ve found:

.bl-paragraph {
  color: @paragraphColor;
  font-size: @paragraphFontSize;
  font-weight: @paragraphFontWeight;
}

So, I’ve defined my own css class like:

.paraSmall {
  .bl-paragraph {
    font-size: 12px;
  }
}

and assigned the class name paraSmall to the paragraph UI component.
This does not work. The font size is not changing. Any idea?

Regards,

2

You need to set the styles this way:

.paraSmall.bl-paragraph {
  font-size: 12px;
}

In your version, you’re trying to set the font size of a paragraph that has a parent with the .paraSmall class.

Regards,
Alexander

3

Thanks! Magic CSS …

1 Like