Rich Text

Rich Text

Type Name
RichText
Usage
This block is used to display rich text content.
Icon
Screenshots
Type
Content
Content Category
Text

    About the Rich Text Block

    The Rich Text block is used to display rich text content on your livepage. Using the block you can add text content and customise the formatting and styling of the text, e.g. bold, italic, underline, or even the font family, font size and alignment.

    Below is an example of a Rich Text block showing some of the basic formatting and styling possible.

    image

    Creating a Rich Text Block

    To create a Rich Text block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Rich Text".

    Creating a Rich Text block.
    Creating a Rich Text block.

    Block Settings

    The main setting of the Rich Text block is the Content setting where you can insert your text and format it using the editing toolbar.

    Adding rich text content.
    Adding rich text content.

    And this is how the result of the above would look like:

    image

    JSON Config

    Attributes

    🗃️
    Block Attributes

    NameTypeDescriptionCommon to All
    backgroundCoverImage
    String
    The cover image that you would want to set as default for the block. Eg: “https://files-myxp.s3-ap-southeast-1.amazonaws.com/livestream/default_background/Light_BG_1.png”
    Yes
    backgroundCoverImageDisablePopup
    Boolean
    Does not allow popup to occur when this field is true.
    Yes
    backgroundCoverImageDistortion
    Object
    Refer here.
    Yes
    backgroundCoverImageVisibility
    Boolean
    Only render background image when this field is true.
    Yes
    blockHeight
    String
    Sets the height of the block, only useful when fitHeightToContent is false. Eg: “200px”, “2rem”Units can be: px, em, rem, %.
    Yes
    blockVisibility
    Boolean
    Determines if the block visibility should be rendered by default.
    Yes
    blockWidth
    String
    Only needs to be specified when widthType is “custom”. Eg: “100%”Units can be: px, em, rem, %.
    Yes
    boundingBox
    Boolean
    Value of true would result in the block being wrapped with a white background.
    Yes
    breakpoints
    Object
    Refer here.
    Yes
    contentMargin
    Array
    [“0”, “0”, “0”, “0”, “px”]Last index can be: “px”, “rem”, “em”, “%”, “”.
    Yes
    contentPadding
    String
    [“0”, “0”, “0”, “0”, “px”] Last index can be: “px”, “rem”, “em”, “%”, “”.
    Yes
    fitHeightToContent
    Boolean
    Setting this field to true would result in blockHeight to have a predetermined value.
    Yes
    heading
    String
    “heading”
    Yes
    headingAlignment
    Enum
    "center" | "left"
    Yes
    headingVisibility
    Boolean
    true
    Yes
    order
    Integer
    1
    Yes
    textContent
    String
    HTML elementeg: “<p>This is a paragraph.</p>”
    No
    widthType
    Enum
    Renders the block width styling based on the value selected. Only when “custom” is selected, blockWidth needs to be specified. Eg: “full” | “half” | “custom” | “fit-content”
    Yes

    Sample

    "page-description-block": {
          "type": "RichText",
          "title": "Page Description",
          "data": {
              "heading": "Page Description",
              "headingVisibility": false,
              "headingAlignment": "center",
              "textContent": "<p style=\"text-align: center;\"><span style=\"white-space:pre-wrap;\"><strong><span style=\"font-size: 36px; font-family: var(--themeSecondaryFontFamily);\">Your Event Tagline Here</span></strong></span></p>",
              "order": 3,
              "alignment": "left",
              "blockWidth": "100%",
              "blockHeight": "fit-content",
              "widthType": "full",
              "fitHeightToContent": true,
              "boundingBox": false,
              "contentPadding": ["0", "0", "0", "0", "px"],
              "contentMargin": ["17", "0", "0", "0", "px"]
          }
      }