Layouts Migration Guide

Purpose

This migration guide is to support customers moving from our deprecated CSS customization patterns to the new model aligned with the 2025 banner layouts update. You can find the new CSS guide here.

In early 2025, DataGrail released a new version of the Consent product that includes a drag-and-drop banner editor. This "layouts" feature allows you to add multiple "layers" to your consent banner, and to position elements freely within each layer.

To enable this level of customization, there have been some updates to both the HTML structure and CSS classnames. While these changes are relatively minor, they do constitute "breaking changes" and will require reviewing banner styles prior to the next publish to ensure CSS customization is up to date.

This guide will help you migrate your custom CSS from the legacy system to the new one.

Conceptual Overview

The previous banner was configurable to a certain extent, but was limited in terms of layout and design. Each banner had two layers and the order of elements (text, buttons, etc.) on those layers was fixed.

This latest update introduces a brand-new "editor" screen in the DataGrail app, which allows you to create multiple layers, and to position elements freely within each layer. To facilitate this, the HTML structure of the banner has changed slightly. While the new structure is more flexible, it does mean that any custom CSS you have written for the old banner may need to be updated.

High Level Changes

Because the position of elements on the banner is now customizable, the resulting HTML structure will be unique to each customer. When writing custom CSS, we always recommend targeting HTML elements by using the classnames we provide, rather than relying on a specific HTML structure.

Classnames such as dg-main-content and dg-main-actions were applied to flex containers that were used to group specific elements such as text and buttons. Because these elements are now free to be positioned anywhere on the banner, the CSS classnames (and respective HTML elements) no longer make sense and have been removed.

New classnames such as dg-links and dg-link have been introduced. These are more concise, flexible and generally more semantically correct than the previous classnames.

Re-publishing

After updating your CSS, remember to re-publish both your banner and your custom stylesheet to ensure that the changes are applied correctly.

Removed Classnames

We have removed several HTML elements and classnames that no longer make sense for the new banner editor. These were primarily wrapper components for text and buttons.

CSS Classname
.dg-main
.dg-main-content
.dg-main-actions

New Classnames

Text

Previously, you might have targeted the dg-main-content-explanation class for your text customizations. This classname still exists, and is applied to every text element, but it should be thought of as a "base" class with only a couple of fundamental attributes.

Text elements can now be placed on multiple layers and in any order. They can also be given one of three different styles within the banner editor. Each style has a default font size, weight and color, but these can be overridden with custom CSS.

Going forward, you might want to consider targeting specific text elements by using the more specific classnames in the table below.

CSS Classname	Text Style	Purpose
.dg-text-body	Body	Regular text
.dg-text-title	Title	Title text (e.g. at the top of your banner)
.dg-text-header	Header	Heading text

Buttons

Button elements can now be placed on multiple layers and in any order. As such, the wrapper element with class dg-main-actions has been removed. If you previously used this class to position your button elements - perhaps to modify the layout for mobile screens - your CSS will now have to be updated.

Links

Your banner links (e.g. Privacy Policy) will always be rendered in a single block. The HTML structure has changed very little, but classnames have been simplified. Custom CSS that targets these old classnames should be updated to suit.

CSS Classname (old)	CSS Classname (new)	Purpose
.dg-main-content-link-container	.dg-links	Wrapper component to help position links within a "block"
.dg-main-content-link	.dg-link	An individual link

Categories (Policy Options)

Similar to links, your chosen categories will always be rendered in a single block. Classnames have not changed.

Unchanged

If an element or classname is not referenced above, this means it has not changed. However, the banner is now more flexible, and its final HTML structure will depend on how you've configured it using the layout editor.

If your custom CSS relies on a specific HTML structure, it will likely need to be updated. We always recommend using the classnames we provide to target elements in the DOM.