Task list
Allows to feed information or call to action in a structured way. Shows all user tasks, making it easy to distinguish between completed and pending items.
- Title: Provide the task title.
- Hint text: Clearly and briefly describe the task requirements.
- Status (Completed): Use UI/Tag component
- Status (Incomplete): Use UI/Tag component
State
- Default: No background fill by default.
- Hover: Add bg-gray-50 when hover and underlined the title
Usage example
Grouping tasks
If there are many tasks to complete, grouping them can help users better understand and plan their next steps. You can organize tasks into separate task lists on a page, with each list having a clear, concise heading that explains the group.
- Tasks group title