Skip to content

Timelines and wide chart ​

timeline ​

timeline turns a numbered list into horizontal steps. Without cols-N, all steps stay on one row and share the width.

md
<!-- _class: content timeline cards with-title small color-6 -->

# Our approach

1. **Prepare**
   Gather the data.
2. **Test**
   Compare the approaches.
3. **Measure**
   Review the results.
4. **Adapt**
   Refine the method.
  • The bold text at the start of the item serves as the label, above its description.
  • The displayed number (01, 02…) comes from a CSS counter: the digit written in the Markdown is not a free-form label.
  • cols-2 to cols-6 sets the number of steps per row; the following ones wrap to the next row.
md
<!-- _class: content timeline cols-3 cards with-title small color-6 -->

# With three columns

1. **Prepare**
   Gather the data.
2. **Test**
   Compare the approaches.
3. **Measure**
   Review the results.
4. **Adapt**
   Refine the method.

timeline-vertical ​

The steps are arranged in a single column. Do not add cols-N, which has no meaning here. If the steps no longer fit, spread them over several slides.

md
<!-- _class: content timeline-vertical with-title small -->

# Milestones

1. **Launch**
   Team formation.
2. **Pilot**
   First site equipped.
3. **Rollout**
   Gradual deployment.

chart-wide — comments above a visual ​

chart-wide expects two > groups followed by a single image or a Markdown table across the full width. A title and a caption can complete it.

md
<!-- _class: content chart-wide with-title with-legend cards small -->

# Results

> ## Observation
>
> A first comment.

<!-- -->

> ## Interpretation
>
> A second comment.

![](visuel.png)

Illustrative image, no data.

The image can be replaced by a table without changing the composition:

md
<!-- _class: content chart-wide with-title cards small color-4 -->

# Summary

> ## What works
>
> The observed strengths.

<!-- -->

> ## What remains to be done
>
> The open workstreams.

| Area | Finding | Action |
|---|---|---|
| Tools | Need simplifying | User workshop |
| Process | Clear | Document |
| Training | Partial | Complete |

The theme places, it does not compute

The theme positions an existing visual. It does not draw charts and does not provide a Mermaid engine: export your chart as an image.

Documentation of the DWA Core v1 language, the VS Code extension, the CLI and the theme portal.