Pyramid

The .pyramid style renders items as horizontal bands of a triangle — the first item at the narrow top, the last at the wide base. It is well suited to showing hierarchy, proportion, or foundational layers. Like all styles in this extension, it is activated via filters: [diagrams].

Basic usage

::: pyramid
::: item
Vision
:::
::: item
Strategy
:::
::: item
Tactics
:::
::: item
Operations
:::
:::

Vision

Strategy

Tactics

Operations

Inverted

Add the .inverted modifier to flip the triangle so the first item is the wide top — useful for funnels.

::: {.pyramid .inverted}
::: item
Awareness
:::
::: item
Interest
:::
::: item
Decision
:::
:::

Awareness

Interest

Decision

Separated bands with .gap

Add .gap to the container to separate every band, or to an individual item to detach just that band.

::: {.pyramid .gap}
::: item
Top
:::
::: item
Middle
:::
::: item
Base
:::
:::

Top

Middle

Base

Colors

Use node-color= on the container to set the base color for all bands, or color= on an individual item to override a single band.

::: {.pyramid node-color="#7a3b5c"}
::: item
Top
:::
::: {.item color="#3b7a5c"}
Middle
:::
::: item
Base
:::
:::

Top

Middle

Base

Annotations

Give any item a nested .annotation div to attach an external callout that points at its band with a leader line. Callouts alternate sides up the pyramid — useful when band labels are long, since the detail lives outside the shape. The annotation content is free-form Markdown; any bold text or heading is tinted to match the band color (optional). Annotate all, some, or none of the bands.

Nest the fenced divs with more colons on the outer fences (::::: for the chart, :::: for each item, ::: for the annotation) and leave a blank line around the inner fences.

::::: pyramid

:::: item
Self-actualization

::: annotation
**Self-actualization** achieving one's full potential
:::

::::

:::: item
Esteem

::: annotation
**Esteem** respect, status, and recognition
:::

::::

:::: item
Belonging

::: annotation
**Belonging** friendship, intimacy, and connection
:::

::::

:::: item
Safety

::: annotation
**Safety** security of body, health, and resources
:::

::::

:::: item
Physiological

::: annotation
**Physiological** food, water, warmth, and rest
:::

::::

:::::

Self-actualization

Self-actualization achieving one’s full potential

Esteem

Esteem respect, status, and recognition

Belonging

Belonging friendship, intimacy, and connection

Safety

Safety security of body, health, and resources

Physiological

Physiological food, water, warmth, and rest

The leader lines can be restyled (dashed, dotted, removed) and the colors adjusted — see the Annotations concept page for the full set of ann-line, ann-line-color, and ann-title-color options, which work on every annotated layout.