Skip to content

Text Highlight Shortcode

In this article

    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

    Related Articles
    Back To Top