Primary Hero
Homepage & main landing pages — sky blue tint, softer overlay
Visual reference for CSS variables, Bootstrap components, hero variants, and block color system. Toggle light/dark mode with the button in the top-right corner.
--color-primary--accent-color-primary--accent-color-secondary--body-bg--body-color--secondary-bg--tertiary-bg--border-color--primary--secondary--success--info--warning--danger--light--dark--gray-100--gray-200--gray-300--gray-400--gray-500--gray-600--gray-700--gray-800--gray-900--blue--indigo--purple--pink--red--orange--yellow--green--teal--cyanThis is regular body text using --body-color on --body-bg. Font family: --body-font-family. Size: --body-font-size (1rem).
Bold text. Italic text. This is a link. Inline code. Highlighted text.
This is lead text styled with --muted-color.
| Variable | Preview |
|---|---|
--link-color | Sample link |
--link-hover-color | Hover state |
--color-link | color-link value |
--color-hover | color-hover value |
Card body using --card-bg, --card-color, and --card-border-color.
No header, just body content. Uses the same card variables.
--primary-bg-subtle and --primary-text-emphasis.
--success-bg-subtle and --success-text-emphasis.
--warning-bg-subtle and --warning-text-emphasis.
--danger-bg-subtle and --danger-text-emphasis.
--info-bg-subtle and --info-text-emphasis.
--border-width / --border-color / --border-radius
--box-shadow-sm
--box-shadow
--box-shadow-lg
--nav-bg-color--nav-text-color--mainmenu-nav-link-color| Container | BG Color | BG Image | Border |
|---|---|---|---|
| below-topbar | --container-below-topbar-bg-color | --container-below-topbar-bg-image | --container-below-topbar-border |
| top-a | --container-top-a-bg-color | --container-top-a-bg-image | --container-top-a-border |
| top-b | --container-top-b-bg-color | --container-top-b-bg-image | --container-top-b-border |
| bottom-a | --container-bottom-a-bg-color | --container-bottom-a-bg-image | --container-bottom-a-border |
| bottom-b | --container-bottom-b-bg-color | --container-bottom-b-bg-image | --container-bottom-b-border |
| sidebar | --container-sidebar-bg-color | --container-sidebar-bg-image | --container-sidebar-border |
The .hero#primary and .hero#secondary variants use CSS variables for background color, overlay gradient, and text color. Each adapts automatically with the active theme.
.hero#primaryHomepage & main landing pages — sky blue tint, softer overlay
.hero#secondaryInner pages, events, about — navy overlay, lighter text
| Variable | Variant | Purpose |
|---|---|---|
--hero-primary-bg-color | Primary | Fallback background color |
--hero-primary-overlay | Primary | Gradient overlay tint |
--hero-primary-color | Primary | Text color |
--hero-secondary-bg-color | Secondary | Fallback background color |
--hero-secondary-overlay | Secondary | Gradient overlay tint |
--hero-secondary-color | Secondary | Text color |
Modules in top-a, top-b, bottom-a, and bottom-b positions automatically receive brand colors based on their order. No classes needed — :nth-child() handles assignment.
--block-color-1
--block-color-2
--block-color-3
--block-color-4
--block-highlight-bg
--block-cta-bg
--block-alert-bg
| Variable | Purpose |
|---|---|
--block-color-1 / --block-text-1 | 1st module in position (automatic) |
--block-color-2 / --block-text-2 | 2nd module in position (automatic) |
--block-color-3 / --block-text-3 | 3rd module in position (automatic) |
--block-color-4 / --block-text-4 | 4th module in position (automatic) |
--block-highlight-bg / --block-highlight-text | Named override for #block-highlight |
--block-cta-bg / --block-cta-text | Named override for #block-cta |
--block-alert-bg / --block-alert-text | Named override for #block-alert |
| Priority | Method | How Applied |
|---|---|---|
| 1 (highest) | Named module ID (#block-highlight) | ID in module HTML + named variable |
| 2 (default) | Slot color (--block-color-N) | Automatic by :nth-child() order |
--vm-surface--vm-surface-2--vm-price-color--gab-blue--gab-green--gab-red--gab-orangeInline code: var(--color-primary)
/* Example: overriding block slot 1 in colors_custom.css */
--block-color-1: var(--accent-color-primary);
--block-text-1: #fff;
/* Hero variant usage in module HTML */
<div class="hero" id="primary"
style="background-image:url('/images/hero/main.jpg')">
<div class="col-12 py-5 px-4 text-center">
...content...
</div>
</div>
Comprehensive component demos using MokoOnyx's brand variables. Mirrors the live Joomla article at /style/branded-bootstrap5.
Comprehensive components with toggleable code samples
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Curabitur ullamcorper nec nisi a themed link. Nulla vitae <section> purus.
"Design is intelligence made visible."
| # | Name | Status | Notes |
|---|---|---|---|
| 1 | Alpha | Active | Lorem ipsum dolor sit amet. |
| 2 | Beta | Pending | Integer posuere erat a ante. |
| 3 | Gamma | Blocked | Donec id elit non mi porta. |
Visual preview of key variables with their resolved values displayed via JavaScript.
--color-primary--color-link--color-hover--accent-color-primary--accent-color-secondary--nav-bg-color--body-bg--body-color--border-colorMokoOnyx Theme Test Sheet — v03.09.02 — © 2026 Moko Consulting