Comment on page
Headline
The headline widget is a bit different from other widgets, in that it doesn't use data sources like dataset or scripts, but is simply here to display static text. In addition, these headline texts can be styled by making them e.g. bold, bigger or smaller or changing their font colors. Additionally, all texts can be aligned horizontally and vertically inside the widget.
With these abilities, the headline widget, as the name already kind of implies, is perfect for creating pleasing-looking headlines for your dashboards.
To create a new headline widget, create a new widget as usual, and select Headline as your widget type.
The new headline widget displayed in the widget type selector
The sidebar for the headline widget is split into three different tabs:
- General: Basic settings like the widget name, description, etc.
- Texts: In this tab, you can define your headlines. This works pretty similarly to how you add texts in a text widget.
- Colors: In here you can define some default colors your widget should use, as well as color conditions.
This tab works pretty much like for any other widget, some features here are explained further in the general widget documentation here.
This tab is where the magic happens. When creating a new headline widget, you should already have an entry here. To add a new headline entry, simply click the Add entry button below your existing entries. To delete an entry, click on the trashcan icon on the right side of the entry name.
By clicking on the Entry name (in that case "Entry 1") all the settings for this entry will be displayed.
The following settings are available for every headline entry:
- Text: Here you define the text that should get displayed
- Horizontal position: How your entry should be aligned horizontally, more on that below
- Vertical position: How your entry should be aligned vertically, more on that below
- Text color: Here you can define what color your headline should have
- Text style: If you want your text to be bold, italic, or underline (or all three if you want) you can do that here.
- Text size: Here you can select how big your headline should be.
- Wrap text: if the entry exceeds the widget, this will try to force a line break instead of ending the entry with "...".
- Dynamic font size: By enabling dynamic font size, your text size will automatically adjust so that your text will fill the whole widget width. Note that this setting is only available when you have only one headline element.
Example settings for a single headline entry
To align a headline, you can adjust the settings for the Horizontal Position and the Vertical Position.
With the horizontal position setting, you can define if your headline should be aligned to the left side of your widget, the center of your widget, or the right side of your widget. The vertical position is pretty much the same but aligns your headline to the top, center, or bottom of the widget.
Showing all possible positions of a headline entry
What you also do is create multiple headline entries with the same alignment, so for example, have two headlines both aligned horizontally and vertically in the center. Headlines with the same alignment will then simply be displayed on top of one another.
Example of two headlines both aligned to the center
In the colors tab, you can define your widget's default colors and add color conditions. Further explanation of these features can be found here.
The text color you define in a single headline entry will take precedence over the default text color defined in the colors tab.
On the other hand, the text color of a matching color condition will always take precedence over the text color defined in your headline entries.
Last modified 2mo ago