Underline

<quiet-underline>

stable

since 2.1

Draws a decorative underline beneath text.

Use this component to draw attention to specific words or phrases in marketing copy, hero sections, and landing pages. It renders decorative underlines as SVG, giving you styles like arcs, waves, and gradients that CSS text-decoration can't achieve.

This is some text with an arc underline effect.

<p style="font-size: 1.25rem;">
  This is some text with an
  <quiet-underline with-gradient style="--gradient-start: #e63946; --gradient-end: #f4a261;">arc underline</quiet-underline>
  effect.
</p>

Because the underline uses SVG to achieve styles that text-decoration can't, the underline won't wrap across multiple lines. It works best on shorter phrases or individual words.

Examples Jump to heading

Basic usage Jump to heading

The underline component wraps inline content and renders an SVG underline beneath it. By default, it renders an arc in the current text color.

You can underline words within a sentence.

<p style="font-size: 1.25rem;">
  You can <quiet-underline>underline words</quiet-underline> within a sentence.
</p>

Changing the appearance Jump to heading

Use the appearance attribute to change the underline style. Available options are arc (default), straight, wavy, dashed, dotted, and freehand.

Arc, straight, wavy, dashed, dotted, and freehand

<p style="font-size: 1.25rem;">
  <quiet-underline appearance="arc">Arc</quiet-underline>,
  <quiet-underline appearance="straight">straight</quiet-underline>,
  <quiet-underline appearance="wavy">wavy</quiet-underline>,
  <quiet-underline appearance="dashed">dashed</quiet-underline>,
  <quiet-underline appearance="dotted">dotted</quiet-underline>, and
  <quiet-underline appearance="freehand">freehand</quiet-underline>
</p>

Setting the color Jump to heading

Use the --color CSS custom property to set a specific underline color. You can use any valid CSS color value.

Brand colored and red underline and green underline.

<p style="font-size: 1.25rem;">
  <quiet-underline style="--color: var(--quiet-primary-stroke-mid);">Brand colored</quiet-underline> and
  <quiet-underline style="--color: #e63946;" appearance="wavy">red underline</quiet-underline> and
  <quiet-underline style="--color: #29a35c;" appearance="dashed">green underline</quiet-underline>.
</p>

Gradient colors Jump to heading

Add the with-gradient attribute and use --gradient-start and --gradient-end CSS custom properties to create gradient underlines.

Red to orange gradient

Blue to purple wavy gradient

<p style="font-size: 1.25rem;">
  <quiet-underline with-gradient style="--gradient-start: #e63946; --gradient-end: #f4a261;" width="3">
    Red to orange gradient
  </quiet-underline>
</p>

<p style="font-size: 1.25rem;">
  <quiet-underline with-gradient appearance="wavy" style="--gradient-start: #3a86ff; --gradient-end: #8338ec;" width="2">
    Blue to purple wavy gradient
  </quiet-underline>
</p>

Adjusting stroke width Jump to heading

The width attribute controls the thickness of the underline stroke in pixels.

Thin, medium, and thick underlines.

<p style="font-size: 1.25rem;">
  <quiet-underline width="1">Thin</quiet-underline>,
  <quiet-underline width="3">medium</quiet-underline>, and
  <quiet-underline width="5">thick</quiet-underline> underlines.
</p>

Amplitude Jump to heading

The amplitude attribute controls the height of curves in pixels. This affects the arc and wavy appearances.

Subtle, medium, and pronounced curves.

Subtle wavy, medium wavy, and pronounced wavy.

<p style="font-size: 1.25rem;">
  <quiet-underline amplitude="1">Subtle</quiet-underline>,
  <quiet-underline amplitude="3">medium</quiet-underline>, and
  <quiet-underline amplitude="5">pronounced</quiet-underline> curves.
</p>

<p style="font-size: 1.25rem;">
  <quiet-underline appearance="wavy" amplitude="1">Subtle wavy</quiet-underline>,
  <quiet-underline appearance="wavy" amplitude="3">medium wavy</quiet-underline>, and
  <quiet-underline appearance="wavy" amplitude="5">pronounced wavy</quiet-underline>.
</p>

Wavelength Jump to heading

The wavelength attribute controls the density of waves in pixels. This only affects the wavy appearance. Smaller values create tighter waves, larger values create more stretched waves.

Tight waves, normal waves, and stretched waves.

<p style="font-size: 1.25rem;">
  <quiet-underline appearance="wavy" wavelength="4">Tight waves</quiet-underline>,
  <quiet-underline appearance="wavy" wavelength="8">normal waves</quiet-underline>, and
  <quiet-underline appearance="wavy" wavelength="16">stretched waves</quiet-underline>.
</p>

Custom dash patterns Jump to heading

You can create custom dash patterns by targeting the ::part(svg) and setting your own stroke-dasharray value.

Long dashes, dash-dot pattern, and sparse dots.

<p style="font-size: 1.25rem;" id="underline_dash-patterns">
  <quiet-underline class="long-dashes" appearance="straight">Long dashes</quiet-underline>,
  <quiet-underline class="dash-dot" appearance="straight">dash-dot pattern</quiet-underline>, and
  <quiet-underline class="sparse-dots" appearance="straight">sparse dots</quiet-underline>.
</p>

<style>
  #underline_dash-patterns {
    quiet-underline.long-dashes::part(svg) {
      stroke-dasharray: 12 4;
    }

    quiet-underline.dash-dot::part(svg) {
      stroke-dasharray: 8 4 2 4;
    }

    quiet-underline.sparse-dots::part(svg) {
      stroke-dasharray: 1 8;
    }
  }
</style>

Line caps Jump to heading

Use the caps attribute to control the line endings. Available options are round (default), butt, and square. The square option extends the stroke slightly beyond the endpoints, while butt ends exactly at the endpoints.

Rounded caps, butt caps, and square caps.

<p style="font-size: 1.25rem;">
  <quiet-underline width="4" caps="round">Rounded caps</quiet-underline>,
  <quiet-underline width="4" caps="butt">butt caps</quiet-underline>, and
  <quiet-underline width="4" caps="square">square caps</quiet-underline>.
</p>

Adjusting the position Jump to heading

The text's line-height is inherited and will affect the vertical positioning of the underline. You can also use the --x-offset and --y-offset CSS custom properties to fine tune its position.

Closer, normal, and further spacing.

<p style="font-size: 1.25rem;">
  <quiet-underline style="--y-offset: -6px;">Closer</quiet-underline>,
  <quiet-underline>normal</quiet-underline>, and
  <quiet-underline style="--y-offset: 6px;">further</quiet-underline> spacing.
</p>

You can also shift the underline horizontally.

Left, normal, and right.

<p style="font-size: 1.25rem;">
  <quiet-underline style="--x-offset: -8px;">Left</quiet-underline>,
  <quiet-underline>normal</quiet-underline>, and
  <quiet-underline style="--x-offset: 8px;">right</quiet-underline>.
</p>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

Self-hosted

To manually import <quiet-underline> from the CDN, use the following code.

import 'https://cdn.quietui.org/v2.4.0/components/underline/underline.js';

To manually import <quiet-underline> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path.

import '/path/to/quiet/components/underline/underline.js';

Slots Jump to heading

Underline supports the following slots. Learn more about using slots

Name	Description
(default)	The content to underline.

Properties Jump to heading

Underline has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`appearance`	The visual style of the underline.	`'arc' 'straight' 'dashed' 'dotted' 'wavy' 'freehand'`	`'arc'`
`caps`	The style of line caps used on the underline stroke.	`'round' 'butt' 'square'`	`'round'`
`width`	The stroke width in pixels.	`number`	`2`
`amplitude`	The amplitude (height) of curves in pixels. Affects `arc` and `wavy` appearances. Both positive and negative values can be used.	`number`	`4`
`wavelength`	The wavelength of waves in pixels. Only affects the `wavy` appearance.	`number`	`8`
`withGradient` `with-gradient`	When true, uses a gradient for the stroke color based on --gradient-start and --gradient-end CSS properties.	`boolean`	`false`

CSS custom properties Jump to heading

Underline supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--color`	The color of the underline. Used when `with-gradient` is not set.	`currentColor`
`--gradient-start`	The starting color for gradient underlines. Must be used with the `with-gradient` attribute.	`currentColor`
`--gradient-end`	The ending color for gradient underlines. Must be used with the `with-gradient` attribute	`color-mix(in oklab, currentColor, transparent 75%)`
`--x-offset`	The horizontal offset of the underline.	`0`
`--y-offset`	The vertical offset of the underline.	`0`

CSS parts Jump to heading

Underline exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`svg`	The SVG element containing the underline.	`::part(svg)`
`path`	The path element for the underline stroke.	`::part(path)`

Underline

Examples Jump to heading #

Basic usage Jump to heading #

Changing the appearance Jump to heading #

Setting the color Jump to heading #

Gradient colors Jump to heading #

Adjusting stroke width Jump to heading #

Amplitude Jump to heading #

Wavelength Jump to heading #

Custom dash patterns Jump to heading #

Line caps Jump to heading #

Adjusting the position Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #