A wide band of photos that slides from one picture to the next on its own.

What you can change

• The photos in the slideshow, and their order
• A short description of each photo (helps people who use screen readers)
• Which part of a photo stays in view — the middle, the top, or the bottom
• Whether the slides move by themselves, and how many seconds each one stays up
• Whether the left/right arrows are shown
• Whether the little dots underneath are shown
• The background colour behind the band and the space above and below it

Use this section to show off the awards and recognition your company has earned. Each award appears between a pair of laurel leaves that are added automatically.

What you can change

• The small line of text above the heading, and the heading itself (you can make part of the heading stand out in a brighter colour)
• Add, remove, or reorder awards
• For each award: upload the awarding body's logo, type the award name, and list the year or years it was won
• Whether soft decorative glows appear in the background, and the spacing above and below the section

This section sits near the foot of a page and nudges visitors towards other parts of the business, like careers or the foundation, using side-by-side cards.

What you can change

• The heading at the top of the section
• The cards — add, remove, or reorder them. Each card has a title, a short blurb, the label for its link ("See the roles"), and where that link goes
• Each card's decorative line-art graphic: pick "Career", "Foundation", or "None"
• Whether to show the soft decorative background glows, and their colour and position
• The section's background colour and the space above and below it

A card with no link set simply hides its link, so you never end up with a link that goes nowhere. Two cards fill the row neatly on a desktop screen.

Use this to spotlight a key message or offer, with a headline, a short intro, a button, and a big picture running across the bottom.

What you can change

• The small label that sits above the heading
• The heading — you can make part of it stand out in a brighter colour
• The short paragraph under the heading
• The button text and the page or link it points to (leave the button text empty to hide the button)
• The wide picture shown across the bottom
• Flip image horizontally — mirror the picture left to right without re-exporting it. Leave it off to show the artwork exactly as supplied, and keep it off whenever the picture contains readable words or signage
• Rotate image — turn the picture by up to 180 degrees either way. 180 stands it upside-down; 90 or 270 put it on its side, which can crop a wide image
• The background colour and how much space sits above the section
• The soft glowing circles in the background — turn them on or off and change their colour, size and position

Shows your certifications and compliance credentials as a tidy list that visitors can click to open and read.

What you can change

• The small label above the heading and the heading itself
• Each certification's title and the short statement that appears when it's opened
• Whether that certification shows a "Read our statement" button. This is off by default and should stay off for the short blurbs — switch it on only where there's a long, full policy worth opening in a pop-up (the Anti-Modern Slavery statement is the one that has one). A certification with the button off simply shows its blurb.
• The button label under each statement (default "Read our statement") — it opens a pop-up for that certification
• The slides inside each certification's pop-up — add more than one to let visitors page through them with Prev / Next
• An optional logo and reference link on each slide of the pop-up
• Add or remove certifications from the list
• Turn the soft background glow on or off
• The space above and below the section

A call-out band that encourages visitors to take the next step.

What you can change

• The message wording
• The button text and where it links to
• The background colour of the band
• Swap in a sign-up form when you want visitors to subscribe (with an optional picture)
• For the announcement look: the headline, the smaller line under it, and its link
• For the announcement look: which globe spins behind the card — Globe 1 (blue/green, upright) or Globe 2 (mint/teal, tilted, slower reverse spin)

Comes in 3 looks

• A simple message with a button
• A message with a sign-up form and an optional picture
• A striking announcement card with a headline, a sub-line and a glowing globe backdrop

A get-in-touch section with a short invitation on the left and a contact form on the right, sitting on a soft glowing background.

What you can change

• The small line of text above the heading
• The heading, including which words stand out in white
• The short paragraph below the heading
• Which contact form appears, and the thank-you message people see after they send it
• Which globe spins behind the section — Globe 1 (blue/green, upright) or Globe 2 (mint/teal, tilted, slower reverse spin)
• Turn the soft background glows on or off, and adjust their colour, size and position
• How much space sits above and below the section

A dark showcase strip of customer story cards under a heading, used to highlight the client work you're proud of.

What you can change

• The small line of text above the heading, and the heading itself
• An optional button and where it goes (for example "Explore all customer stories")
• Each story card: its photo, the customer's logo, the title, and the "read the story" link text and destination
• The photo is a link too, not only the "read the story" wording underneath it — visitors can click the picture itself, and it goes wherever you pointed that card's link
• Which part of a photo stays in view if it gets cropped
• Add or remove story cards, and reorder them
• The background colour, the top and bottom spacing, and the soft background glows

Comes in 3 looks

• Featured — the first story is one big card with the smaller cards lined up beside it
• Equal — four equal-sized cards side by side, which turn into a swipe carousel on phones
• Home — the first story shows as a large photo with its text (including a short description) beside it, then the rest sit in a row underneath

Use this section to showcase a series of client success stories. Each story sits in its own row that visitors click to expand and read the full write-up.

What you can change

• The small label and the main heading above the list
• Each story's client logo and the colour of the little box behind it
• Each story's title
• An optional picture that shows when a story is opened
• The three parts of each story: the background, what was done, and the result
• Add as many stories as you like, or remove ones you don't need
• The section's background colour, the space around it, and the soft background glows

Shows a set of cards that highlight your areas of expertise. Each card has a title, a short line of supporting text that appears when someone hovers over it, and a "Learn more" link.

What you can change

• The small label and the heading at the top of the section
• Each card's title, its short description, and the words and destination of its "Learn more" link
• Add more cards or remove ones you don't need
• The section's background colour and how much space sits above and below it
• The soft coloured glows in the background (turn them on or off and pick their colours), and which moving background wave plays behind the cards — plus its position (nudge left/right, up/down), rotation and opacity

Use this section to spell out the things you do — each one shown with a little icon, a short title, and a sentence or two of explanation, sitting next to a heading on the left.

What you can change

• The small label above the heading
• The heading (you can make some of the words stand out in a brighter colour)
• Each item in the list — its icon, its title, and its short description
• Add or remove as many items as you like
• The background colour and the amount of space above and below the section
• Turn the soft background glows on or off, and set their colour, size, and position

This section shows the details of your head office — the address, phone number, and parking directions — with a map of the location underneath.

What you can change

• The small label above the heading, and the heading itself
• The street address (and an optional second line, like a PO Box — empty by default)
• The phone number and the parking directions
• The label shown next to each detail (for example "Address", "Phone", "Parking")
• Map search override — optional. The full-width map across the bottom is a real, live Google Map found from the Address above automatically. Only fill this in if Google pins the wrong spot.
• Turn the soft background glow on or off, and change its colour, size and position

The map across the bottom is a real embedded Google Map — visitors can pan and zoom it right on the page.

This is the large banner at the very top of a page — the first thing visitors see.

What you can change

• The small line of text above the headline (the eyebrow)
• The main headline and the short paragraph of intro text
• One or two buttons, and where each one links to
• The background photo (or video), and how it is positioned and zoomed
• Zoom — on the Showcase look, each of the three background pictures (desktop, tablet and phone) has its own zoom. The slider runs from 0 to 200% with 100% in the middle, so you can pull the picture back below 100% just as easily as you push past it. Leave it at 100% to show the image at its natural size.
• Flip horizontally — mirrors the background photo. On is the long-standing behaviour; switch it off to show the image exactly as uploaded, which you should do whenever the photo contains readable text or signage.
• Mobile focal point — on phones the background shows in a shorter band, so only part of a wide image fits. Slide this to pick which part stays in view (0 = left edge, 50 = centre, 100 = right edge). Desktop is unaffected.
• Show or hide the "Our customers" logo strip, and swap in your own logos
• How that logo strip is laid out — a still grid, or logos gliding sideways (see below)
• Logo layout on phones — optionally give phones their own strip count, e.g. two strips on desktop and three on mobile. "Same as desktop" keeps one layout everywhere.
• The background colour and the spacing around the banner

Three ways to lay out the customer logos

Pick one under Logo lockup layout. It only appears when the "Our customers" strip is switched on.

• Grid / columns (original) — the logos sit still. On the Home look they form a neat grid; on Showcase each column quietly swaps to the next logo every few seconds.
• Marquee — two strips, opposite directions — two rows glide sideways forever, the top row travelling left to right and the bottom right to left. This is what the homepage uses.
• Marquee — three strips — the same idea with a third row; directions alternate row by row.
• Marquee — single strip — one row gliding right to left. This is what each industry page uses.

The blocks match the page they sit on: on the Home look they are frosted-glass panels; on Showcase they are outlined panels so the photo behind shows through. You can also set the Marquee speed in pixels per second (40 is the default) — the loop is worked out from your logo count, so adding or removing logos never changes how fast it travels. The logos run off both edges behind a soft fade, so there is no visible start or end.

Comes in 4 looks

• Showcase — a full photo background with a row of customer logos underneath.
• Home — a looping background video with two buttons and a tidy grid of customer logos.
• Style 2 — a soft gradient background with a gentle dot pattern, no photo and no logo strip.
• Contact — a headline on the left and a "get in touch" form on the right, over a soft gradient background (used for the Contact page).

Use this section to show off your most impressive numbers, each with a short line explaining what it means.

What you can change

• The small label, the heading, and the short intro paragraph at the top
• Each big number and the short caption underneath it
• Add or remove numbers to show as many or as few as you like
• An optional button under the numbers — set both a label and a link for it to appear (the About page uses it for "Learn about the Foundation")
• Turn the gentle background glows on or off, and pick their colour and position
• Turn the soft moving background wave on or off, choose which wave plays, and nudge its position (left/right, up/down), rotation and opacity
• The background colour and the space above and below the section

Shows a set of tall photo cards — one per industry — under a short heading. The whole card is clickable and takes visitors to that industry's page.

What you can change

• The small label above the heading and the heading itself
• Add, remove, or reorder the industry cards
• Each card's photo, title, a short description, and the "read more" wording (like "See our experience")
• Where each card links to
• The background colour, the spacing above and below, and the soft glow circles behind the cards

On a phone, each card's description and link are always shown; on a computer they gently fade in when someone hovers over the card.

Use this section for one short, punchy sentence that sums up who you are or what you do. It sits centred on the dark background and gently slides into view, one line at a time, as visitors scroll to it.

What you can change

• The wording of the statement
• The background colour of the section
• The soft coloured glows behind it — turn them on or off, and set their colour and position
• How much space sits above and below the section

This section introduces your leadership team as a row of photo cards that people can slide left and right through.

What you can change

• The small eyebrow line, the main heading, and the short intro paragraph
• The button on the right (its wording and where it links) — leave the wording empty to hide it
• Each person in the row: their photo, name, and job title
• Their bio, plus LinkedIn and X links. Add a bio and the card becomes interactive — the bio slides up over the photo when you hover on a computer, or tap on a phone, and scrolls inside the card if it is long. Leave the bio empty and that person's card simply stays a photo. The bios are the same ones used on the Leadership page, so keep the two in step if you edit one.
• Add or remove people, and drag to reorder them
• Turn the soft background glow circles on or off
• The background colour and the space above and below the section

Tip: for the best look, each person's photo should be a cut-out with a see-through background, so it sits nicely on the card.

A dark grid of team cards — a photo, name and job title for each person — where a card can open to reveal a short bio and social links.

What you can change

• The heading above the cards (for example "C-Suite Leadership").
• Each person's photo, name and job title.
• A short bio for each person, shown when their card opens.
• LinkedIn and X (Twitter) links for each person.
• Add or remove people.
• Turn on a thin divider line at the top — useful when you place a second group of people directly below the first.
• The background colour and the space above and below the section.
• Optional soft background glows behind the cards.

How a card opens

On a desktop computer, moving the mouse over a card slides the bio up over the photo. On phones and tablets there is no mouse to hover with, so a small chevron appears next to the person's name to show the card can be opened — tapping anywhere on the card slides the bio up, and the chevron flips over. Tapping outside the card closes it again. A card only becomes openable if that person has a bio or a social link; people with neither stay as a plain photo card, with no chevron.

Shows a world map with a labelled dot on each place your company operates. Hovering a dot reveals the location name.

What you can change

• The small label, heading and short intro text above the map
• The list of locations shown as dots on the map
• On phones, a row of country tabs appears under the map — visitors tap a country there instead of the tiny pins (which stay as display-only markers). It is a line-style row with an underline under the selected country (the look the Customer Stories filter used before it moved to pills in August 2026 — the two no longer match).
• Where each dot sits on the map (how far across and how far down)
• Which location is highlighted as the main one
• Turn the soft background glow on or off
• The section's background colour and the space around it

This section lists your offices around the world, grouped into regions, so visitors can find the location nearest them.

What you can change

• The small label above the heading (the eyebrow)
• The main heading for the section
• The offices themselves — add, remove, reorder, and edit every one
• The background colour behind the section
• The amount of space above and below the section
• The soft background glows (turn them on or off, and set their colour, size, and position)

Each office has

• Region — the heading it sits under, like "Africa" or "Europe". Offices sharing a region are grouped together, and the regions appear in the order they first show up in your list. So keep all the offices of one region next to each other.
• City / country — the card title, like "Cape Town, South Africa"
• Address — press Enter for each new line; the line breaks are kept exactly as you type them
• Phone — leave it empty to hide the phone line for that office
• Map search override — optional. Each card shows a real, live Google Map found from that office's city and address automatically, so there's usually nothing to fill in. Only use this if Google pins the wrong spot — whatever you type here is searched instead.

Every card ends in a real embedded Google Map — visitors can pan it, zoom it, and open it full-screen in Google Maps. The maps only load as a visitor scrolls near them, so they don't slow the page down.

This is the plain, dark banner that sits at the very top of a page, showing a small label above a big headline. It's great for the top of a listing or landing page.

What you can change

• The small label that appears above the headline
• The large headline text
• The background colour of the banner
• How much space sits above and below the text

Use this section to showcase the partners, platforms, and technology brands you work with, shown as a tidy grid of logos beneath a short heading.

What you can change

• The small line of text above the heading, the heading itself, and the short paragraph below it
• Which partner logos appear, and which spot in the grid each one sits in (leave spots empty to space things out or centre a row)
• Turn the soft background glow on or off
• The background colour and the amount of space around the section

Comes in 2 looks

• A still grid of logos (the normal look)
• A gently cycling set of logos that rotates through and slides into view as you scroll (best with a single row of about six logos)

Shows your technology partners as a grid of cards, each with the partner's logo and name. Clicking any card slides a panel up from the bottom of the screen with that partner's write-up, and arrows let visitors move through every partner without closing and reopening.

What you can change

• The small eyebrow line above the heading, and the heading itself
• Each partner: their logo, name, a link to their site, and the paragraph shown in the panel
• Add or remove partners, and drag to reorder them — the grid and the panel both follow that order
• Turn the soft background glow circles on or off
• The background colour and the space above and below the section

Tip: the panel is where the detail belongs. Keep the card itself to just the logo and name, and let the write-up do the talking once someone clicks.

For pages that are mostly writing — a privacy policy, terms and conditions, a cookie policy. You type into a normal text editor and the module handles the styling, so the result matches the rest of the site without you touching any colours.

What you can change

• The text itself, using the editor's own Heading 2, Heading 3, paragraph and list options
• The reading width — "Readable" keeps lines short enough to read comfortably, "Full width" lets the text fill the page
• The background colour and the space above and below the section

Please use real headings. Pick "Heading 2" from the editor's style menu for each section rather than making a line bold. Real headings are what let people scan the page, jump to a section, and find it in search — and the module styles them for you.

The same goes for colour: don't set text colour by hand. The module already makes headings white, body text light grey, and links green so they stand out on the dark background. Text pasted from Word or a browser often carries hidden colours with it, which is how the old privacy policy ended up invisible in places — pasting as plain text avoids that.

A dark section that shows off your key numbers — each a big figure with a short label beneath it — under a heading.

What you can change

• The small line of text above the heading
• The heading — make the key words stand out by making them bold (they turn white, the rest stays grey)
• An optional short intro sentence under the heading
• Each number and its short label — add, remove or reorder as many as you like
• An optional smaller list under a label, for spelling out what the number counts (the About page uses it to name the seven Centres of Excellence behind the "7")
• The background colour and how much space sits above and below the section
• The soft background glows and the faint dotted shimmer behind everything (turn on or off)

Comes in 2 looks

• Grid (three-across) — the heading sits on top, with the numbers laid out in neat rows of three below it.
• Spread (heading pinned to the side) — the heading stays on the left while the numbers run down the right in two columns, with plenty of breathing room.

Shows your customer stories as a stack of large cards, with pills along the top to filter them by category and a button to reveal more.

How the filtering behaves

• The filters are pills. Selected ones turn lime, and more than one can be picked at a time — choosing Banking and Insurance shows the stories from both, not only the ones in both.
• "All" is the cleared state rather than a category. Pressing it deselects everything, and it lights up again on its own whenever nothing else is selected, so the list can never end up empty by accident.
• While a filter is applied the cards are briefly replaced by grey placeholders, so the list reads as though it is fetching results. It is deliberately quick — about a third of a second — and it is skipped entirely for visitors whose device is set to reduce motion.
• On each card, the category tag that caused the match turns lime too, so it is obvious at a glance why a story is in the results. With "All" selected, no tag is highlighted.

What you can change

• The category filters shown along the top (an "All" pill is always added for you)
• Each story card: its photo, its brand logo, the categories it belongs to, its headline, and where the "Read the story" link goes (plus the wording of that link)
• How big each brand logo appears — a "Brand logo size" slider on every card (50–250%, 100% is standard). Every logo is normalised to the same height, so a square mark like Absa reads much smaller than a wide wordmark like Capitec; use this to even them out. The setting only appears once you've picked a logo. In the example below Absa is set to 200%.
• How many cards show at first, and the wording of the "Load more" button
• The background colour and the top/bottom spacing
• The soft background glows behind the section (turn them on or off)

Tip: a card only appears under a filter when one of its categories matches that pill's name, so keep the wording identical in both places — that match is also what decides which tag on the card lights up lime.

This is the large banner that sits at the very top of a customer story page. It shows a full-bleed photo that fades into the dark background, the customer's name, a big headline, and a few key results.

What you can change

• The customer name shown as a small label above the headline
• The main headline
• The large background photo (leave it blank to use the built-in one)
• The row of standout numbers below the headline — each has a big figure and a short description; add or remove as many as you like (four fit nicely across)
• The background colour and the spacing above and below

Use this section to spotlight the biggest results or achievements from a project, one card at a time.

What you can change

• The small line of text above the heading, and the heading itself (you can make some words stand out)
• Each highlight card: its little picture, its title, and a short description
• Add, remove, or reorder as many highlight cards as you like
• The background colour and the amount of space above and below the section
• The soft background glows, and which moving background wave shows behind the cards — plus its position (nudge left/right, up/down), rotation and opacity

On a big screen the cards glide across sideways as you scroll; on a phone you swipe through them one by one. You can also drag the cards directly — grab one with the mouse and throw it, and the row carries on gliding for a moment before it settles, the same way a flick behaves on a phone.

Use this near the end of a customer story to show the difference your work made — a strong statement, a photo, key numbers, and the parts of the business you were involved in.

What you can change

• The small label above the heading, and the heading itself
• The short paragraph of text beside the heading
• The two big numbers and the short caption under each one
• The heading for the list, and the list of business areas (the numbering is added for you)
• The background colour and how much space sits above and below the section
• The soft background glows — turn them on or off, and set their colour, size and position

This is the little introduction band near the top of a customer story. It shows the customer's logo, a few category tags, and a short paragraph about them.

What you can change

• The customer's logo (leave it blank to use the default one)
• The category tags shown as small labels (for example "Banking" or "Financial Services")
• The short introduction paragraph about the customer
• The background colour and how much empty space sits above and below the band
• The soft glowing shapes in the background — turn them on or off, and change their colour, size, and where they sit

Use this section to feature what your customers say about you, with their name, role and photo.

What you can change

• The heading shown above the quotes
• A small line of intro text (the eyebrow) above the heading, used in one of the looks
• Each testimonial: the quote itself, the person's name, their job title or role, their photo, and (optionally) a link the photo opens — e.g. the person's LinkedIn profile
• Add as many testimonials as you like — with just one, the slider stays still; add more and visitors can flip between them
• The background colour behind the section and the space above and below it

Comes in 3 looks

• Contained — the quote sits inside a soft, glowing card in the middle of the section
• Full width — the quote stretches edge to edge with the glow filling the whole section
• Split — a heading on the left and the quote with next/back arrows on the right

Use this to feature a single story — a client project, a capability, or a delivery example — with a scannable headline and details people can open one at a time.

What you can change

• The small eyebrow line, the main heading, and the short intro paragraph
• The expandable items — each has a title and some text, and the first one starts open
• Each item's glow colour — the soft halo behind its picture while it is open (plain style). Leave empty for the default blue; set it to match the picture's own colour.
• The large image shown beside the list (or a separate image for each item, which swaps in as that item is opened)
• The background colour and the amount of space above and below the section
• The soft background glows — turn them on or off, and set their position, size and colour

Comes in 2 looks

• Framed (photo card) — the image sits in a rounded photo card. Best for real photography.
• Plain (floating art over a glow) — no card frame; the image floats on the background over a soft glow. Best for icons or illustrations.