Module Presentation Examples

This page shows common ways to use module presentation settings without over-designing every block.

Example 1: News grid without an extra wrapper

Use this when the cards inside the module already provide enough visual structure.

Recommended setup:

• Wrapper style: None
• Title: optional
• Spacing: default
• Keep the grid cards as the main visual element
• Do not enable Split cards unless the module output becomes visibly unframed after removing the wrapper

Good for:

• homepage news grids
• article lists
• league news sections
• card-based content modules

Example 2: Commercial CTA that stands out

Use this when one offer should be visually stronger than normal content.

Recommended setup:

• Wrapper style: Highlight or Card
• Prominence: strong
• Button color: use the site accent or sponsor color
• Keep the CTA text short

Good for:

• bookmaker CTA
• broadcast CTA
• app download
• sponsor offer

Example 3: Compact sidebar list

Use this when a sidebar needs useful information without taking too much space.

Recommended setup:

• Wrapper style: Flat or Card
• Density: compact
• Title: short
• Avoid large images

Good for:

• top leagues
• latest news
• fixtures
• standings mini
• related links

Example 4: Reusable branded section

Use reusable custom classes when the same visual treatment appears in several places.

Good examples:

• homepage hero treatment
• muted section band
• commercial offer card
• overlay card for a modal trigger
• compact list treatment

Recommended workflow:

Related settings:

• Define reusable classes in Styles & Theme.
• Learn the difference between wrappers, classes, and utility classes in Module Presentation.

Example 5: Small utility adjustment

Utility classes are best for small one-off layout changes.

Good uses:

• center a module
• add or remove top spacing
• make a module full width
• change a grid column count
• add a subtle hover effect
• hide a module on mobile or desktop

If the adjustment becomes part of your brand style, move it into a reusable custom class instead.

In the module editor, open Style -> Advanced classes to search common utility presets or type the exact class you need.

Example 6: Split cards for loose sections

Use Split cards only when one module renders several loose sections and those sections need their own surfaces.

Good candidates:

• grouped editorial sections that do not already have cards
• compact lists where each direct section needs a boundary
• reusable content blocks where the outer wrapper is intentionally removed

Avoid it for:

• modules that already render article cards
• modules that already have a grid card layout
• large sports tables, fixtures, or standings where extra card frames make scanning harder

Recommended setup:

• Wrapper style: None or Flat
• Split cards: enabled only after checking the preview
• Padding: default or tight
• Border radius: global

Practical advice

• Do not style every module individually.
• Use wrappers for structure, not decoration.
• Remove wrappers from grids when the inner cards already frame content.
• Use Split cards only when the module becomes too loose without an outer wrapper.
• Use stronger styling for CTAs and commercial modules.
• Keep sports data modules quiet and easy to scan.
• Review every strong visual change on mobile.