- Where to find it
- Labelled Typography → Decoration in the "Selected Column" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
textDecoration
In plain English
Text decoration draws a line on the text itself — under it, through it, or above it. Each carries a well-established meaning to readers, so the choice is less aesthetic than it looks.
An underline means "this is a link". Decades of the web have trained everyone to expect that, so underlining text that is not clickable reliably frustrates people. A line through the middle means "this no longer applies" — an old price, a completed task, a withdrawn statement. A line above the text has no conventional meaning and is almost never useful.
The most common reason to touch this setting is the opposite of adding a line: choosing "none" to remove the underline a link came with, usually because the link is styled as a button.
What each option does
| Option | What you will see |
|---|---|
none | No line. Use this to strip the default underline from a link styled as a button. |
underline | A line beneath the text. Readers will assume it is clickable. |
line-through | A line through the middle. Means superseded or cancelled — an old price, a done task. |
overline | A line above the text. No conventional meaning; rarely useful. |
When you would use it
- A link is styled as a button and should not carry an underline: choose "none".
- You are showing an old price next to a new one: choose "line-through".
- A genuine text link has lost its underline and needs it back for clarity.
How to change it
- Select the column, open "Selected Column", then "Typography", then "Decoration".
- Pick a value from the dropdown.
Watch out for
- Underlining text that is not a link is one of the most reliable ways to confuse visitors. Use Font Weight for emphasis instead.
- Removing the underline from a real link makes it harder to spot, especially for anyone who cannot easily distinguish your link colour from your text colour. Make sure something else marks it out.
Related settings
For developers
The technical reference for what this setting produces: MDN: text-decoration. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.