smallBox.ftl
1 <#--
2 Macro: smallBox
3 Description: Generates an HTML element for a small box widget with an icon, title, and text.
4 Parameters:
5 - color (string, optional): the background color of the widget.
6 - title (string, required): the title of the widget.
7 - text (string, required): the text content of the widget.
8 - boxIcon (string, optional): the icon to use in the widget.
9 - titleLevel (string, optional): the HTML heading level for the title of the widget.
10 - unit (string, optional): a unit to display next to the title.
11 - url (string, optional): a URL to link the widget to.
12 - urlText (string, optional): the text to display for the URL link.
13 - id (string, optional): the ID of the widget element. If not provided, a default ID will be generated.
14 - params (string, optional): additional HTML attributes to include in the widget element.
15 - fontSize (string, optional): the font size of the widget icon.
16 -->
17 <#macro smallBox color='' title='' text='' boxIcon='' titleLevel='div' unit='' url='' urlText='' id='' params='' fontSize='40px'>
18 <div class="card card-sm mb-3 box-widget yeah" draggable='true' <#if id!=''> id="${id}" data-id="${id}"</#if><#if params!=''> ${params}</#if>>
19 <div class="card-body">
20 <div class="row align-items-center">
21 <div class="col-auto">
22 <#if color !=''><span class="bg-${color} text-white avatar"></#if>
23 <@icon style=boxIcon />
24 <#if color !=''></span></#if>
25 </div>
26 <div class="col">
27 <#if url!=''><a class="card-link" href="${url}"></#if>
28 <${titleLevel} class="font-weight-medium"><span class="counter">${title}</span><#if unit!=''> ${unit}</#if></${titleLevel}>
29 <div class="text-muted">${text}</div>
30 <#if url!=''></a></#if>
31 </div>
32 </div>
33 </div>
34 </div>
35 </#macro>