Skip to content

Text Highlight Shortcode

The Total theme includes a highlight shortcode you can use that will add a line under the text. This is best used with large headings like the example below:

A large heading with highlighted text

The code used for the example above looks like this:

A large heading with [highlight color="#8de7db"]highlighted[/highlight] text

By default the highlight will use the same color as your site accent color but as you can see in my example you can add a color parameter with a custom color value.

The highlight shortcode can be used in the text editor but also inside certain Total elements such as the Heading element.

Shortcode Attributes

The following attributes are available so you can modify your highlight.

AttributesAllowed ValuesDefault
colorAny custom hex/rgba/variable color, the word “accent” or a color palette slug.accent
heightCustom height which will be added as an inline CSS height attribute.0.5em
bottomCustom bottom position which will be added as an inline inset-block-end attribute.0px

Back To Top