Module Presentation
Every module can have its own presentation settings. These settings change how the module looks, not what data it shows.
Use module presentation when you want to:
- add a title or subtitle above a module
- make a module feel like a card
- remove the card wrapper for a cleaner grid
- add spacing around a block
- make one commercial or editorial section stand out
- reuse the same visual treatment on several modules
Basic presentation
Most modules include simple controls for:
| Setting | What it changes |
|---|---|
| Title | Heading shown above the module |
| Subtitle | Smaller supporting text under the title |
| Wrapper style | Whether the module has a card, soft background, highlight, or no wrapper |
| Spacing | How much space the module uses around its content |
| Alignment | Left, center, or right presentation where supported |
| Visibility | Whether the module appears on desktop, mobile, or both |
The safest option is to use the default wrapper on most modules. Override it only when the module needs to behave differently from the surrounding page.
Related settings:
- Styles & Theme controls the global card shape, spacing, colors, and default module wrapper behavior.
- Header and Footer controls site-wide shell areas around page content.
- Module Presentation Examples shows common setups for grids, sidebars, CTAs, and reusable classes.
Wrapper styles
| Style | Best use |
|---|---|
| Default | Follow the site's global module style |
| Card | Give the module a clear surface and boundary |
| Flat | Let the module sit quietly on the page background |
| Highlight | Add gentle emphasis for editorial or commercial blocks |
| None | Remove the outer wrapper completely |
Use None for modules that already create their own visual frame, such as heroes, large grids, or modules that should align directly with the page content.
Split cards
Split cards is a special wrapper option. It tries to turn the direct sections inside one module into separate cards.
It can be useful when:
- a module contains several natural sections
- the global wrapper has been removed
- the result would otherwise feel like loose, unframed content
- you need each section to sit on its own card surface
Use it carefully. Some modules already render their own cards, grids, or lists. On those modules, Split cards can create too many frames or change spacing in a way that feels heavier than intended. If a module already looks structured, prefer Wrapper style: None or Default instead.
Stronger module styling
Some modules offer stronger visual controls, especially commercial and editorial modules such as:
- Hero
- CTA
- Newsletter
- Promo code
- Bookmaker CTA
- Broadcast CTA
- Banner
- Modal trigger
Depending on the module, you may be able to change:
- density
- prominence
- layout
- button colors
- background colors
- text colors
- image or overlay treatment
Use these controls for modules where visual emphasis matters. For normal sports data modules, keep the design quieter so visitors can scan data easily.
Reusable custom classes
Advanced plans can define reusable custom classes in the central CSS editor, then apply those classes to individual modules.
Good uses:
- a branded homepage hero treatment
- a commercial card style reused across offers
- a compact list style for sidebars
- a muted background band used between page sections
- a stronger overlay card for newsletter or modal triggers
Recommended workflow:
Create the style once
Add the reusable class in Settings -> Styles -> CSS.
Apply it to modules
Open a module and add the class in its presentation settings.
Reuse consistently
Apply the same class to similar modules instead of creating a new style each time.
Custom classes are best for reusable treatments. For example, define
sc-home-hero once in Settings -> Styles -> CSS, then apply that
same class to every module that should share the treatment.
Related settings:
- Styles & Theme explains global visual settings.
- Module Presentation Examples shows practical reusable class examples.
Utility classes
Some modules also let you add small utility classes for quick layout adjustments. These are useful for small changes such as:
- centering a block
- reducing top or bottom spacing
- changing a grid column count
- adding a hover effect
- hiding or showing a module on certain screen sizes
Use utility classes for small changes. Use custom classes for larger branded treatments that you expect to reuse.
Avoid building an entire page out of one-off classes. If a visual style appears more than once, make it a reusable custom class instead.
Utility classes live in the module editor's Advanced area. Use the searchable preset picker for common options, or type a class manually when you know the exact utility you need.
Titles with dynamic text
On dynamic templates, titles and subtitles can use page context. For example, a league template can show a title like:
| Example title | What visitors see |
|---|---|
Upcoming [league_name] Matches | Upcoming Premier League Matches |
Latest [team_name] News | Latest Arsenal News |
More from [country_name] | More from England |
These placeholders work only when the page has that context. A static homepage does not know which league or team a visitor is viewing, so entity placeholders will be blank there.
Practical advice
- Keep most modules on the default presentation.
- Remove wrappers from large grids when the cards inside already provide enough structure.
- Use stronger styles for CTA, newsletter, bookmaker, broadcast, promo, and modal trigger modules.
- Keep sports data modules clean and scannable.
- Test changes on mobile before publishing.