Checklist Element
The Checklist Element creates lists with an icon or a number in front of every item instead of a plain bullet. It is ideal for features, benefits, requirements or the steps of a process, where each point should be easy to spot at a glance.
The icon, colors, font size, divider lines and row backgrounds are set once for the whole list. Single items can still get their own icon and colors, for example a different icon for an item that is not included, or a stronger color for the most important point in the list.
In this article: How To Use · Element Options · List Item Options · Tips · Related Elements · Example
How To Use The Checklist Element
Add the Checklist Element to any column and add one List Item per point, writing its text in List Item Content. Choose the Checklist Type: Icons shows the icon from Select Icon in front of every item, Numbered counts the items 1, 2, 3.
Set the Icon/Number Color and turn on Icon/Number Circle to place the icon or number on a round background in the Icon/Number Circle Color. Text Color, Item Font Size and Item Padding control the text and the space around each item.
Divider Lines draw a line between the items in the Divider Line Color, and the odd and even row background colors create a striped list. In each List Item you can override the icon, the icon or number color and the circle color for that item only.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Checklist. Change them there to style every Checklist at once.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this content box. |
| Checklist Type | Global setting for all list items. Make a selection if you want to have numbered list or icons list. |
| Select Icon | Global setting for all list items, this can be overridden individually. Click an icon to select, click again to deselect. |
| Icon/Number Color | Global setting for all list items. Controls the color of the checklist icon/number. |
| Icon/Number Circle | Global setting for all list items. Turn on if you want to display a circle background for checklists icons/numbers. |
| Icon/Number Circle Color | Global setting for all list items. Controls the color of the checklist icon/number circle background. |
| Text Color | Global setting for all list items. Controls the color of the checklist text. |
| Item Font Size | Select the list item’s font size. Enter value including any valid CSS unit, for example 14px. |
| Item Padding | Controls the padding size of the list items. |
| Divider Lines | Choose if a divider line shows between each list item. |
| Divider Line Color | Controls the color of the divider lines. |
| Odd Row Background Color | Controls the background color of the odd row. |
| Even Row Background Color | Controls the background color of the even row. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
List Item Options
Each List Item holds its own text and can override the icon, the icon or number color and the circle color of the whole list.
General
| Heading | Description |
|---|---|
| Select Icon | This setting will override the global setting. |
| List Item Content | Add list item content. |
| Icon/Number Color | Controls the color of the checklist icon/number. |
| Icon/Number Circle Color | Controls the color of the checklist icon/number circle background. |
Tips
- Keep every item short, ideally one line. For longer explanations per point, use the Content Boxes Element instead.
- The numbered type still builds a bullet list with the numbers written in; screen readers do not announce it as a numbered list. For a sequence where the order matters, mention the step in the text as well.
- The Item Font Size also scales the icon and the circle, so the list stays in proportion.
- Icon/Number Circle Color only has an effect when Icon/Number Circle is on.
- Use a light color for the odd or even rows only, and keep the text color strong enough to read on both.