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

KeyDescription
textThe text to add, either as Markdown or HTML
widthOptional. The width of the component, when inside a Section or Row component with their columns option set to null.
horizontal_marginOptional. Margin added horizontally to the element. Defaults to 0.
vertical_marginOptional. Margin added vertically to the element. Defaults to 1.
alignOptional. Defaults to left. Text alignment, either left, right or centre.
sizeOptional. Defaults to sm. Font sizing options, see below for more details.
colourOptional. Sets the text colour using one of the named colour theme variables. Refer to themes for more details.
bg_colourOptional. Sets the background colour using one of the named colour theme variables. Refer to themes for more details.
inner_paddingOptional. 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

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev