Template variants

You can choose these variants under Template settings › Custom template. All of them work independently of the demos; the Styleguide shows examples.

Text

Variant	Use
`creuva_card`	Card with image, category (subline), title and text; the last link makes the whole card clickable
`creuva_feature`	Icon box with a round icon (SVG or small image); on hover the card lifts and the icon is filled with the primary color
`creuva_cta`	Call to action: a surface with kicker, two-tone headline and text on the left, the links in the last paragraph as buttons on the right (the first one filled, the others as outlines)
`creuva_media`	Image & text: image left, right, above or below (image alignment), kicker, two-tone headline, text with a check list; links in the last paragraph become buttons
`creuva_testimonial`	Testimonial: quote in the text, name as headline, role as subline, portrait as image
`creuva_team`	Team member: portrait, name, role (subline), contact
`creuva_price`	Price card: package as headline, price as subline, list of features, last link as button; highlighted with `u-featured`
`creuva_tile`	Image tile: image in the proportions of its image size, the whole tile is clickable

Icon box: In the CSS Style Selector under „Elementoptionen › Icon-Box“ (element options › icon box) you find „Ohne Karte“ (without card, u-feature-plain, e.g. benefits in a row) and „Icon links, ohne Karte“ (icon on the left, u-feature-inline, e.g. contact details).

Call to action: You choose the color under „Farben des Elements“ (element colors: white, gray, light accent, accent color, outline; text and buttons adapt). „Call to Action › Zentriert“ (centered, u-cta-stacked) puts the buttons below the text. To span the full window width, use „Breite › Volle Breite“ (width › full width, u-full-bleed) – then set „Innenabstand oben und unten: Kein“ (top and bottom padding: none) on the article.

Description list

Variant	Use
`creuva_stats`	Key figures as cards: term = number, description = label
`creuva_timeline`	Timeline: term = year/step, description = event; horizontal as soon as the element is wide enough, vertical in a grid column
`creuva_facts`	Facts as a card, e.g. project data: term = label (“Client”), description = value
`creuva_steps`	Process steps: numbered steps, side by side with a connecting line from tablet width up

Key figures: Characters before or after the number ("+", “%”, “o’clock”) are highlighted, and the numbers count up while you scroll. Ranges such as “11–20” don’t count up, and dates stay unchanged. Optionally, an icon sits above each number (field Icons (key figures), in the order of the entries). With u-no-countup the numbers don’t count up.

Gallery

Variant	Use
`creuva_slider`	Gallery as a slider: Images per row sets how many images a slide shows (1–6; at most two on tablets, one on phones); Full-size view opens the lightbox

You can find more about galleries under Sliders and galleries.

Links as buttons

In boxes with u-bg-primary or u-bg-accent, a link that stands alone in the last paragraph is automatically shown as a button. In texts with u-lead and in section headers it becomes an arrow link (“View all services →”).