Text

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

Schema

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

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

Description

Key	Description
text	The text to add, either as Markdown or HTML
width	Optional. The width of the component, when inside a Section or Row component with their columns option 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.

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

The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.

Markdown support

The text added to the text key supports markdown. 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": {
        "caption": "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