Text

The Text component is used to add text to the report. The text can be formatted with either HTML or Markdown.

Example JSON

Below is an example of the JSON required to define a Text component:

{
    "type": "Text",
    "options": {
        "text": "Lorem ipsum dolor sit amet",
        "bg_colour": "background-faded",
        "width": "2/3"
    }
}

Description

Key	Description
text	The text to add, either as Markdown or HTML
width	Optional. The width of the component. Only applies when inside a Section or Row component whose columns option is set to null.
horizontal_margin	Optional. Margin added horizontally to the element. Defaults to 0.
vertical_margin	Optional. Margin added vertically to the element. Defaults to 1.
align	Optional. Defaults to left. Text alignment, either left, right or centre.
size	Optional. Defaults to sm. Font sizing options, see below for more details.
colour	Optional. Sets the text colour using one of the named colour theme variables. Refer to themes for more details.
bg_colour	Optional. Sets the background colour using one of the named colour theme variables. Refer to themes for more details.
inner_padding	Optional. Sets inner padding on the component. Defaults to 3 if bg_colour is set. Can take on any value from 1 to 17.
markdown_format	Optional. Parses the text with a markdown formatter. Defaults to true.

Font size

The font size can be overriden using the size key, and can take on any of the following values (in increasing order):

• xs
• sm
• lg
• xl
• 2xl
• 3xl
• 4xl

Width

For details on the width key, please see here.

Markdown support

The text added to the text key supports markdown (when markdown_format is set to true). This means you can achieve the following:

• Bold text by placing text within double asterisks e.g. **Text**
• Italic text by placing text within underscores e.g. _Text_
• New lines using the characters \n\n
• Heading styles 1-4 using # symbols e.g. # Heading One, ## Heading Two.
• Hyperlinks using the syntax [Text to hyperlink](https://www.google.com)

Lists support

You can also create lists inside a Text component using markdown in the following way:

{
    "type": "Text",
    "options": {
        "text": "Some content\n\n* List one\n* List two\n* List three\n\nMore content"
    }
}

Notice that the start and end of the list section is guarded by the \n\n newline characters. However, between list items, the characters \n is used.

Example