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"


textThe text to add, either as Markdown or HTML
widthOptional. The width of the component. Only applies when inside a Section or Row component whose columns option is 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.
markdown_formatOptional. 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


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.


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