Modules: showcasing services, method and work
The modules that present what you do and how you work: services grid, feature teasers, value cards, process steps, method board, case studies and buttons.
Updated August 23, 2026 · 5 min read · Applies from version 1.0.0
Twelve modules present your offer, your method and your work. All of them follow the shared conventions: a Display group first, a two-tone heading, a colour scheme and a section padding on the Style tab.
Services and offers
Services grid with hover highlight and tags
Your practices in three layouts: hairline cells that fill with the accent colour on hover (with an optional sweep of light), detailed cards with up to four bullet points and a proof line, or compact link pills. Each service takes an icon (18 to choose from), a name, a short description, up to three tags, bullets, a proof line and its own link. Two or three columns; Card link: only the link is clickable, or the whole card.
Feature teaser with image card and key figures
A short pitch beside a tall image card: eyebrow, two-tone heading, description, an optional row of key figures (value + label) and a button. The image card carries a corner tag and can link to a page. Image card on the right or on the left. The case study template uses it as the "next project" block.
Expandable feature rows with two-tone titles
Hairline rows, each with a badge, a two-tone title, a short description and an accent plus button that unfolds a longer rich text answer. Behavior: open one row at a time, open the first row on load. Turn Allow rows to unfold off to use it as a static list of features.
Checklist in two columns
What is included in an offer or an engagement: a list of items over one or two columns of hairline rows, each opening on a ticked disc (icon: check, plus, star, arrow, target, sparkles). Heading above the list or in a side column, with an optional button.
Numbered value cards
A section header followed by numbered hairline cards — principles, commitments or steps. Numbers are generated automatically (01, 02, 03…) or written by hand on each card. Two to four columns; card border (hairline outline, top rule only, none) and radius.
Method and process
Process steps with large numerals
Three or four steps side by side under a rule (accent, neutral hairline, none), each opening on a large numeral or a free label such as a date range (Step numbering: automatic or written in each step). Works on a light or a dark background — the "Method steps with frequently asked questions" section uses the dark panel.
Method board with animated kanban columns
Your delivery method shown as a kanban board: staggered columns that light up one after the other, each with its duration, its task cards (status: done, in progress, up next) and the deliverable at the end. The board advances on its own (Seconds per column, 4.6 by default) and holds still while a visitor points at it. Status labels are editable, so they can be translated.
Work and ecosystem
Case studies grid with tag filters
A listing of case studies in three columns with an optional filter bar built from the expertise tags you enter on each item. Each case study has an image, an expertise tag, a name, a sector, a year, a key figure, an award and a link. Three layouts: Grid (sector and year), Proof (three cards captioned with their key figure — used in the "Case study proof with customer quote" section) or Awards (shows the award won). Filters are applied in the browser, without reloading the page, and the result count is announced to screen readers.
Featured case studies panel with auto highlight
Three flagship case studies inside a full-width accent panel: image plus white card, with the middle column flipped (or all cards under their image). The highlight moves from one column to the next on its own (3.2 seconds by default) and pauses on hover or on focus. In the Background style group, Color behind the top corners and Color behind the bottom corners set the colour showing around the panel's rounded corners — match them to the sections above and below.
Technology ecosystem with orbiting logos
A dark section pairing highlighted points (title + description) with two rings of tool badges orbiting your brand mark. Each badge is a monogram tinted with the tool's brand colour; set a node to Large to make it stand out, or upload a logo image to replace the monogram. Inner ring up to 6 tools, outer ring up to 8; ring radius and rotation speed are adjustable. Below 1160 px the rings become a static grid. The radial glow can follow the pointer.
Links and buttons
Related links as pill buttons
A compact band of related links shown as pills: an uppercase label, then one pill per destination with an optional icon and an arrow. Handy at the foot of a service or case study page ("Next practice", "See also"). Label beside or above the pills; outlined, accent wash or page-coloured pills; optional hairline above the band.
Call to action button with arrow icon
A single button using the theme button styles: label, link, optional icon (more than twenty to choose from) before or after the label, style (primary, secondary, outline, ghost, inverted), size (small, medium, large), full width, alignment. Drop it in a column, under a text module, or anywhere a module has no button of its own.