Roadmap Phase

Description

The Roadmap Phase component is designed to represent a specific phase or stage within a roadmap. It allows for the presentation of a structured content block that includes a subtitle, title, description, and a list of related items. This component is particularly useful for creating visual roadmaps, project timelines, or multi-step processes in a clear and organized manner.

Installation

bash

sabaccui add roadmapPhase

Usage

Here's an example of how to use the Roadmap Phase component in a Storyblok block:

Preview

Q4 2024

Launch Phase

This phase focuses on the final preparations and the official launch of our product.

Beta Testing

Marketing Campaign

Official Launch

Schema

Field	Type	Description	Default
`subtitle`	`text`	A short text displayed above the main title. Required and translatable.	None
`title`	`text`	The main heading for the roadmap phase. Required and translatable.	None
`description`	`markdown`	A detailed explanation of the phase, supports markdown formatting. Translatable.	None
`items`	`bloks`	A list of roadmap phase items, restricted to the `roadmapPhaseItem` component.	Empty array

Notes

The items field is designed to work exclusively with the roadmapPhaseIten component, ensuring consistency in the presentation of roadmap items.
The component is nestable, allowing for flexible placement within other components or layouts.
This component is tagged as a "Molecule" in the component hierarchy, suggesting it's a mid-level UI element that combines simpler components.

Best Practices

Use clear and concise language for the subtitle and title to quickly convey the phase's purpose.
Utilize the markdown-supported description field to provide detailed information about the phase, including lists, links, or emphasis where needed.
When adding items to the phase, ensure they are logically connected and follow a chronological or priority order.
Consider using consistent formatting across multiple Roadmap Phase components if presenting a full roadmap to maintain visual coherence.