CSS classes

All Creuva classes are available as styles in the CSS Style Selector, in the CSS style section of content elements, articles and modules. So you don’t need to remember any class names – you just select them.

Categories and groups

The classes are sorted into categories (e.g. „Abstände“, spacing) and, within them, into groups (e.g. „Innenabstand oben und unten“, top and bottom padding). Each group appears in the element as a select field with exactly one style. An element only shows the groups that fit its type – „Raster“ (grid), for example, only on element groups, „Buttons“ only on hyperlink and text elements.

Categories and groups are normal records. Under Layout › CSS styles you can change them, sort them by drag and drop and add your own categories and groups. Sections and element types always apply to the whole group.

Importing the classes

The classes are imported

automatically by creuva:install,
once by contao:migrate on existing websites, as long as no Creuva group exists yet,
after a theme update with new classes, by this command:

vendor/bin/contao-console creuva:css-styles

The import only adds what is missing. Your changes in the back end – titles, element types, removed styles, your own categories and groups – are kept.

Switching from the Style Manager

The classes are still stored in the CSS class field, so the front end stays unchanged. After the update, contao:migrate creates the Creuva groups and transfers the selection. You recreate your own Style Manager groups as CSS styles. Afterwards you can delete the tables tl_style_manager_archive and tl_style_manager as well as the styleManager columns.

Tip

The classes also work directly in the CSS class field, e.g. in places without a CSS style selection.

Overview of the classes

Area	Classes
Background	`u-bg-surface`, `u-bg-muted`, `u-bg-accent`, `u-bg-primary`
Width	`u-full-bleed` (background across the full width), `u-narrow`
Frame	`u-card`, `u-featured` (highlighted price card)
Grid (element group)	`u-grid-2`, `u-grid-3`, `u-grid-4`; alignment `u-align-start` (don’t stretch columns), `u-align-center`, `u-align-end`; column width with two columns `u-cols-wide-start`, `u-cols-wide-end` (3 : 2)
Table	`u-table-compare` (package comparison: columns 2–4 colored, “✓”/"–" as icons), `u-table-league` (league table)
News	`u-news-no-author` (hide author)
Spacing	padding `u-py-` (top and bottom), `u-pt-` (top), `u-pb-` (bottom); margin `u-my-`, `u-mt-`, `u-mb-` – each `0`, `s`, `m`, `l`, `xl`
Text	`u-text-left`, `u-text-center`, `u-text-right`, `u-lead`, `u-muted`, `u-accent`, `u-kicker`
Buttons	`u-button` (primary), `u-button-secondary` (white), `u-button-accent`, `u-button-outline`, `u-button-outline-accent`
Element colors	`u-card-white`, `u-card-muted`, `u-card-soft`, `u-card-primary`, `u-card-accent`, `u-card-outline-primary`, `u-card-outline-accent`, `u-card-flat`, `u-card-none`
Icon color	`u-icon-soft` (default), `u-icon-accent`, `u-icon-primary`, `u-icon-white`, `u-icon-light`, `u-icon-plain`, `u-icon-original`
Icon box	`u-feature-plain` (without card), `u-feature-inline` (icon on the left)
Call to action	`u-cta-stacked` (centered, buttons below the text)
Gallery	`u-gallery-mosaic`, `u-gallery-mosaic-right`, `u-gallery-featured`, `u-gallery-masonry`
Animation	`u-reveal-up`, `u-reveal-left`, `u-reveal-right`, `u-reveal-down`, `u-reveal-zoom`, `u-reveal-blur`, `u-reveal-fade`, `u-reveal-none`, `u-reveal-stagger` (content one after another), `u-no-countup`
Elements	`u-accordion-icon`, `u-accordion-info`, `u-accordion-chat`, `u-media-plain` (image & text without accent surface)
Visibility	`u-hide-mobile`, `u-hide-desktop`

Element colors

Cards, icon boxes, testimonials, price cards and the boxes of the Theme Components Bundle get a surface (white, gray, light accent, primary or accent color) or just a colored outline. On dark surfaces, text, links and kickers automatically switch to the contrast color.

You set the circle behind the icon of an icon box separately. With the primary and accent color the icon turns white; this works with single-colored SVG icons. SVG icons are colored in the color scheme; with u-icon-original they keep the colors of the file (e.g. multicolored icons). PNG and JPG images always keep their colors.

For key figures, the selection applies to each individual number. Without a selection they only have a light surface on a dark background, and with u-card-none not even there.

Technically, the classes only set CSS variables (--card-bg, --card-border, --icon-bg …) that all cards read – see Custom CSS.