General
Cover page
Cover page
An example cover page with headings placed on an accented background colour.
{
"$schema":"https://hybiscuscdn.blob.core...."
"type":"Report"
"options":{
"report_title":"Example.com"
"report_byline":"Monthly analytics report"
"version_number":"v0.1.0"
}
"cover_page":{
"bg_color":"accent"
"components":[
0:{
"type":"Text"
"options":{
"size":"2xl"
"align":"left"
"inner_padding":6
"bg_color":"background-default"
"text":"# Nunc dignissim risus id metu..."
}
}
1:{
"type":"Text"
"options":{
"size":"lg"
"vertical_margin":6
"colour":"background-default"
"text":"Donec nec justo eget felis fac..."
}
}
]
}
"config":{
"colour_theme":"forest"
"typography_theme":"prompt-inter"
"enable_multi_page":true
}
"components":[
0:{
"type":"Row"
"options":{
"horizontal_margin":0
}
"components":[
0:{
"type":"SparkChart.Line"
"options":{
"width":"1/3"
"aspect_ratio":3
"chart_height":100
"data":[
0:67
1:34
2:23
3:78
4:23
]
"title":"135.7 K"
"perc_change":"-"
"border":true
"perc_diff":57
"button_link":"www.google.com"
"button_text":"See more"
"subtitle":"views this week"
}
"components":[]
}
1:{
"type":"SparkChart.Ring"
"options":{
"width":"1/3"
"radius":50
"stroke_width":15
"value":57
"title":"12.9 K"
"border":true
"button_link":"www.google.com"
"button_text":"See more"
"subtitle":"views this week"
}
"components":[]
}
2:{
"type":"SparkChart.Line"
"options":{
"width":"2/3"
"aspect_ratio":6
"chart_height":100
"data":[
0:67
1:94
2:23
3:18
4:5
5:2
6:3
7:93
]
"title":"918.3 K"
"perc_change":"+"
"border":true
"perc_diff":57
"button_link":"www.google.com"
"button_text":"See more"
"subtitle":"views this week"
}
"components":[]
}
]
}
1:{
"type":"Text"
"options":{
"vertical_margin":3
"text":"# Lorem ipsum dolor sit amet
c..."
}
"components":[]
}
2:{
"type":"Section"
"options":{
"section_title":"Overviews and KPI metrics"
"highlighted":true
"columns":3
}
"components":[
0:{
"type":"Card"
"options":{
"title":"Unique views"
"value":987
"units":"views"
"icon":"comet"
"highlighted":true
}
"components":[]
}
1:{
"type":"Card"
"options":{
"title":"Total sales"
"value":"53,476"
"units":"$"
"icon":"coin"
}
"components":[]
}
2:{
"type":"Card"
"options":{
"title":"Product views"
"value":"1,362"
"units":"views"
"icon":"building-store"
}
"components":[]
}
3:{
"type":"Card"
"options":{
"title":"New customers"
"value":"321"
"icon":"users"
}
"components":[]
}
4:{
"type":"Card"
"options":{
"title":"Returning customers"
"value":"98"
"icon":"user-check"
}
"components":[]
}
5:{
"type":"Card"
"options":{
"title":"Bounce rate"
"value":"0.89"
"units":"%"
"icon":"arrow-back"
}
"components":[]
}
]
}
3:{
"type":"Table"
"options":{
"vertical_margin":4
"title":""
"headings":[
0:"Referrer"
1:"URL"
2:"Count"
]
"striped":true
"rows":[
0:[
0:"Google"
1:"google.com/search?s=raspberryi..."
2:"13,934"
]
1:[
0:"Bing"
1:"bing.com/search?s=raspberry+pi"
2:"9,231"
]
2:[
0:"Facebook"
1:"facebook.com"
2:"3,673"
]
3:[
0:"Twitter"
1:"twitter.com"
2:"2,190"
]
]
}
"components":[]
}
4:{
"type":"Section"
"options":{
"section_title":"Title"
"highlighted":true
}
"components":[
0:{
"type":"Table"
"options":{
"vertical_margin":4
"title":""
"headings":[
0:"Referrer"
1:"URL"
2:"Count"
]
"striped":true
"rows":[
0:[
0:"Google"
1:"google.com/search?s=raspberryi..."
2:"13,934"
]
1:[
0:"Bing"
1:"bing.com/search?s=raspberry+pi"
2:"9,231"
]
2:[
0:"Facebook"
1:"facebook.com"
2:"3,673"
]
3:[
0:"Twitter"
1:"twitter.com"
2:"2,190"
]
]
}
"components":[]
}
]
}
]
}
To use this template, simply press the button in the top right corner to copy the JSON to your clipboard. You can paste it directly into the Cloud Editor to get started with this template.