globalHeadingStyle

A utility to style headings within global HTML where Braid components cannot be used, e.g. styling strings of foreign markup.

This utility should only be used when you have no control over the HTML.

Not controlling the HTML means Braid cannot manage the white space or layout as it typically would. As a result the heading style returned does not trim the surrounding white space.

Styling global HTML

Returns a vanilla-extract compatible object that needs to be passed through one of vanilla-extract’s styling APIs (e.g. ‘globalStyle’) to create the actual styles.

// styles.css.ts
import { style, globalStyle } from "@vanilla-extract/css"
import { globalHeadingStyle } from "braid-design-system/css"

export const root = style({})

// Target all <h2> elements within the root class
globalStyle(`${root} h2`, globalHeadingStyle({ level: "2" }))

Braid Logo