getting started
premium components
deprecated components
Section
The Section
component is used to divide up the report into named regions. You
can provide a title, an optional icon, as well as the ability to highlight the
entire section.
Schema
Below are some examples of the schema required to define a Section
.
{
"type": "Section",
"options": {
"section_title": "Section One",
"icon": "dashboard",
"highlighted": true,
"columns": null
},
"components": [...]
},
{
"type": "Section",
"options": {
"section_title": "Section One",
"icon": "dashboard",
"columns": 2
},
"components": [...]
}
Description
Key | Type | Description |
---|---|---|
section_title | String | The title of the Section . |
icon | String | Optional. The icon to place next to the value. |
highlighted | Boolean | Optional. Highlight the section and its contents using an accented colour background. |
columns | Number | Optional. The number of columns to divide the section up into. See below for more details. |
width | String | Optional. The width of the component, when inside a Row component with their columns option set to null . |
horizontal_margin | Number | Optional. Margin added horizontally to the element. Defaults to 3. Accepts any integer between 1 - 12 , 14 or 16 . |
vertical_margin | Number | Optional. Margin added vertically to the element. Defaults to 1. Accepts any integer between 1 - 12 , 14 or 16 . |
column_spacing | Number | Optional. Spacing between components rendered as columns. Defaults to 3. Accepts any integer between 1 - 12 , 14 or 16 . |
$components | Array<Object> | Optional. The components to add within the Section . |
Width
For details on the width
key, please see here.
Components / extendable
This component is extendable, meaning it supports adding components
within it. To add components inside, simply add the objects defining
the components inside the components
key.
Columns
For details on the columns key, please see here.
Icon
Icons are powered by the Tabler Icons
package which provides over 1,250 different icons. Simply use the icon name
provided on the Tabler Icons website in place of the icon
key in your schema.
Highlighted background
By setting the highlighted
key to true
, this changes the background to
an accent colour to help draw attention to the section. The colour chosen is
dictated by the theme applied to your report. Refer to the Theming section
for more details.
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