Styling the consent banner: data-termly-* attributes – Termly

Termly's cookie consent banner exposes a set of data-termly-* attributes you can use to target it from your own CSS and JavaScript. These attributes are a supported, stable part of the banner, we will not rename or remove them.

Don't target the banner's CSS class names or HTML tags. Class names like termly-styles-root-b0aebb are generated automatically at build time and change whenever we reorganize our code, so a rule written against one will stop working with no warning. Tag-based selectors (e.g. [data-termly-part="banner-actions"] button) rely on internal markup that can also change. Write your selectors against the attributes below and nothing else, and they'll keep working across releases.

1. Identifying a part of the banner

Selector	What it matches
`[data-termly-part="consent-banner"]`	The banner container, carries size, position, background, and shadow
`[data-termly-part="banner-message"]`	The block containing the consent message
`[data-termly-part="banner-actions"]`	The block containing the Accept, Decline, and Preferences buttons

2. Identifying how the banner is configured

Three more attributes live on the banner container and reflect the settings chosen in the Termly dashboard, so you can scope a rule to one configuration without affecting the others:

Attribute	Values
`data-termly-variant`	`banner`, `stretch`, `tooltip`, `modal`
`data-termly-size`	`standard`, `compact`
`data-termly-position`	`top` / `bottom` (Banner and Stretch styles); `top_left` / `top_right` / `bottom_left` / `bottom_right` (Tooltip style)

The Modal style is always centered on screen, so data-termly-position is never present on a modal banner.

3. Examples

Narrow the tooltip banner:

[data-termly-part="consent-banner"][data-termly-variant="tooltip"] { 
max-width: 22rem; 
}

Add space above the buttons, but only on the compact size:

[data-termly-part="consent-banner"][data-termly-size="compact"]
  [data-termly-part="banner-actions"] {
  padding-top: 1rem;
}

Find the banner from JavaScript:

const banner = document.querySelector('[data-termly-part="consent-banner"]');

Our own styling uses class names, so an attribute selector like the ones above will usually take precedence without needing !important. Reach for !important only if you find you actually need it.

4. When the banner appears

The banner is inserted into the page after our script loads and determines whether the visitor needs to see it, so it won't be there yet when your own scripts first run. If your JavaScript needs to react to the banner, watch for it with a MutationObserver rather than assuming it already exists. CSS needs no such handling: your rules apply as soon as the banner arrives.

5. What's supported

Supported, safe to target, won't change without notice:

The three data-termly-part values above
data-termly-variant, data-termly-size, data-termly-position, and their listed values

Not supported, may change at any time:

CSS class names of any kind
Tag names (e.g. div, button, a)
The nesting, order, or element types inside the banner
Any element without a data-termly-part attribute

If you have any other questions, feel free to contact the customer support team.