Elements and modules
Creuva comes with its own content elements and modules and styles the Contao core elements. The Styleguide shows how everything looks together.
Content elements
| Element | Description |
|---|---|
| Creuva › Hero | Intro section with kicker, headline with highlighted part, text, two buttons, image and badge |
Logo bar (creuva_logos) | Client or partner logos; no background of its own, the section defines it |
Match (creuva_match) | Competition, home and away team with crests, kick-off, venue, optional result and button |
Hero
The hero image comes in several shapes:
- Organic – image with an organic mask
- Rounded – the whole image with a shadow and an accent shape behind it
- Image unchanged
- Image unchanged with accent shape – no shadow and no cropping, ideal for cut-out images with a transparent background
- Full screen (text on the image) – hero across the full width, portrait format on phones
The badge appears as a small card with check marks, one line per point. Image and text are optional.
Logo bar
You link the logos via the file metadata (“Link” field). In dark mode the logos sit on a light surface so that
dark and colored logos stay readable. The exceptions are the background „Primär (dunkel)“ (primary, dark) and the
class u-logos-original, both meant for white logos. The logo bar is also available as a module, e.g. for the
prefooter slot above the footer.
Match
Without a result, the element shows the kick-off time (next match); with a result, it shows the final score. The
matching table class is „Liga-Tabelle“ (league table, u-table-league): a compact table with centered
numbers; your own team is highlighted if it is bold in the table.
Modules
| Module | Description |
|---|---|
| Creuva header | Logo, main navigation with dropdowns, CTA button, mobile menu and the optional search |
| Creuva brand | Logo, claim and social media links for the footer; the platform is detected from the URL |
| Logo bar | like the content element, for the slots of the page layout |
| Creuva style switcher | Try out color scheme, color mode, typography and corner radius, see Style switcher |
A full-width contact section below the footer columns is an HTML module with the class c-footer-contact in the
footer slot (see the standard demo for an example).
Styled core elements
Creuva also styles:
- the Contao core elements: text, list, description list, table, image, gallery, content slider, accordion, downloads (with file type and size, e.g. “PDF · 245 KB”), hyperlink, code, top link, forms, breadcrumb, search
- the news modules (list as cards, reader, archive menu, pagination)
- events (list with date badge, reader, month and mini calendar, menu), FAQ, newsletter, comments and listing
- the elements of the Theme Components Bundle 2.0: content box, teaser box, price box, feature element, simple box, icon tile, modal
- select fields in forms, without JavaScript
Accordion
Each entry is a card with a round plus/minus toggle. To add an icon in front of the question, set a class on the
accordion element: u-accordion-icon (question mark), u-accordion-info or u-accordion-chat. You can add an
icon of your own with CSS, see Custom CSS.
Sections with a background
You can also select the background classes (u-bg-muted, u-bg-accent, u-bg-primary) on an article – the
article then becomes a full-width section with a background.
Every article has section spacing at the top and bottom. If two articles without a background or with the same background follow each other, the top spacing of the second one is dropped so it doesn’t double up. You can adjust individual articles in the CSS Style Selector under „Abstände“ (spacing).