Custom Styling
Use documented data attributes on the slot element for supported layout and appearance customization.
Style the element you render
In the JavaScript SDK, the slot element starts as your own DOM node. The supported way to control layout is to style that element or its wrapper directly, then let Adkit enhance it.
index.html
Supported styling attributes
For appearance, rely on documented data-adkit-* attributes on the slot element itself.
| Attribute | What it controls |
|---|---|
| data-adkit-aspect-ratio | Slot shape such as 4:3, 16:9, or banner |
| data-adkit-theme | Built-in color theme: light, dark, or auto |
| data-adkit-bg-color | Placeholder background color |
| data-adkit-border-color | Placeholder border color |
| data-adkit-text-color-primary | Primary text color for the price |
| data-adkit-text-color-secondary | Secondary text color for the label and CTA |
index.html
Treat internal selectors like
.adkit-box, .adkit-cta, and modal class names as implementation details. They are not part of the supported styling API and may change between SDK versions.