Accents

Accents provide visual emphasis and can be applied to components to enhance their visual appeal.

Positioning

Use the decoration-border-{position} class to adjust the position of the border decoration. Values include top, bottom, start and end.

decoration-border-start

decoration-border-end

decoration-border-top

decoration-border-bottom

Coloring

By default, accents will inherit the palette color of the parent component, but you can use the border-{position}-{color} class to set a specific color for the accent.

Neutral Box

Custom Width

By default, decoration accents have a width of 3px, but the utilities support custom widths. Value supports spacing scale steps, length, or percentage. Examples: decoration-border-start-4, decoration-border-start-[4px], decoration-border-start-[4%].