Components for FlowsGet It on the AppExchange

Text Block

Overview

The Avonni Text Block component offers an essential and versatile way to integrate text-based content into your Experience Cloud Sites.

The Avonni Text Block is a Reactive Data Component

Using the Avonni Text Block Component

Adding the Component

  • Within the Experience Builder for your Experience Cloud Site, navigate to the page or section where you wish to add the Avonni Text Block.

  • Locate the Avonni Text Block component within the components panel and drag it into the desired position on your page.

Configuring the Text Editor

  • After placing the component, the "Text Editor" settings area will appear.

  • Input Your Text: Begin typing the content you want to display. The rich text content editor within the Text Editor section offers familiar word-processing functionality, providing you with tools including:

    • Formatting: Bold, italics, underline

    • Heading Levels: Choose from various header sizes (H1, H2, H3, etc.)

    • Bulleted and Numbered Lists

    • Links: Add hyperlinks to direct users to other pages or resources.

Customizing the Appearance

The Avonni Text Block component offers an array of appearance settings to personalize the visual presentation of your text content. These settings let you override the default site defaults, allowing you to tailor the component's look and feel for emphasis or brand consistency.

Text Settings

  • Color: Determine the color of your text for optimal contrast and readability. A color picker tool will usually provide easy selection.

  • Font Size: Control the size of your text; generally expressed in pixels (px) or ems, this setting directly affects whether users find your text easy to read..

  • Font Style: Apply variations like italics or oblique to your text (Note: Not all fonts come with italic or oblique variants).

  • Font Family: Choose from a selection of web-safe fonts to define the overall visual character of your text.

  • Font Weight: Adjust the boldness of your text using options like light, normal, bold, or numerical font-weight values.

Background Settings

  • Color: Set the background color behind your text block. Consider contrast for usability; use this strategically to highlight important content.

Important Considerations

  • Overrides: Remember that these appearance settings within the Avonni Text Block component will take precedence over any default styling established within your Experience Cloud Site.

  • Legibility: Always prioritize readability during customization. Good contrasts and precise font sizes are key.

  • Brand Alignment: Strive to ensure that your appearance choices conform with your site's overall branding scheme

Last updated