Labels

Basic Label

Add text labels to arrows with the label parameter.

{{< arrow from="50,50" to="250,50" label="Click here" >}}

Label Position

Use label-position to place the label at different points along the arrow.

Start

{{< arrow from="50,50" to="250,50" label="Start" label-position="start" >}}

Middle (default)

{{< arrow from="50,50" to="250,50" label="Middle" label-position="middle" >}}

End

{{< arrow from="50,50" to="250,50" label="End" label-position="end" >}}

Label Offset

Use label-offset to control the distance from the line.

Small Offset

{{< arrow from="50,50" to="250,50" label="Close" label-offset="5" >}}

Default Offset (10)

{{< arrow from="50,50" to="250,50" label="Default" >}}

Large Offset

{{< arrow from="50,50" to="250,50" label="Far" label-offset="25" >}}

Labels with Curves

Labels follow the curve and position perpendicular to the path.

Quadratic Curve

{{< arrow from="50,80" to="250,80" control1="150,20" label="Curved" >}}

S-Curve

{{< arrow from="50,50" to="250,120" control1="150,0" control2="150,170" label="S-Curve" >}}

Multiple Positions on Curve

{{< arrow from="50,80" to="250,80" control1="150,20" label="Start" label-position="start" color="blue" >}}

{{< arrow from="50,80" to="250,80" control1="150,20" label="Middle" label-position="middle" color="green" >}}

{{< arrow from="50,80" to="250,80" control1="150,20" label="End" label-position="end" color="red" >}}

Labels with Styling

Labels inherit the arrow’s color.

{{< arrow from="50,50" to="250,50" label="Red Arrow" color="red" >}}

{{< arrow from="50,50" to="250,50" label="Blue Stealth" color="steelblue" head="stealth" >}}

{{< arrow from="50,50" to="250,50" label="Thick Line" width="4" head-size="15" >}}