The Text feature in a list block controls which text values appear from your model and where they are placed within the list item. This allows you to highlight HR details like employee names, job titles, or policy information in a clear and structured way.
Text positions
The Text feature has four sections: Title, Subtitle, Overline, and Action text. You can mix and match these areas to highlight the most important information.
| Name | Description | Example |
|---|---|---|
| Title | The main text that identifies the list item. | Employee’s full name, training course title, or policy name. |
| Subtitle | Secondary detail shown beneath the title. | Employee’s job title and department, task due date. |
| Overline | Smaller text displayed above the title, often for supporting details. | Employee’s email address, policy category, or content tag. |
| Action text | Appears on the right side of the list item, typically time or status info. | “Updated 2 days ago”, “Pending approval”, or “Completed”. |
Text layouts
Different list layouts change how the text is displayed.
| Layout | Description | HR Example |
|---|---|---|
| Row | Displays items in a vertical list with full details (title, subtitle, overline, and action text). | Employee directory showing name, role, email, and last updated time. |
| Grid | Displays items in card-style boxes with space for more details. | Visual directory showing each employee’s name, role, and department. |
| Mini-grid | Shows only the title in a compact layout, best used with Avatar/Icon/Image. | Simple “who’s who” team view showing just employee names and profile pictures. |
Best practice
- Use titles for the most important identifier, for example, employee names.
- Add subtitles for secondary context, for example, roles or dates.
- Use overlines sparingly for categorisation, for example, departments.
- Keep action text short for statuses or time references.
- Match the layout to the use case: rows for detail, grids for balance, mini-grids for quick recognition.