50% black friday discount: BLACKFRIDAY at checkout

Text Path

Available as: Web ComponentShortcodeOxygen Element

Write text along a predefined path.

<spx-text-path text="This text is wrapping around a circle path" text-font-weight="600" text-transform="uppercase" start-offset="20%" src="{{ url.examples }}/3.svg"> </spx-text-path>

Properties

gap

Type: stringDefault: -2%

Space between text and path.

src

Type: string

Image src.

start-offset

Type: stringDefault: 25%

Starting offset off the text.

text

Type: string

Text to be shown.

text-color

Type: stringDefault: #000000CSS Variable: --spx-text-path-text-color

text-font-size

Type: stringDefault: clamp(20px, 3vw, 24px)CSS Variable: --spx-text-path-text-font-size

Text size.

text-font-weight

Type: stringCSS Variable: --spx-text-path-text-font-weight

text-transform

Type: stringDefault: defaultCSS Variable: --spx-text-path-text-transform

Text transform.

Slots

inner

Slot (between HTML tag).

Events

spxTextPathDidLoad

Fires after component has loaded.