Internal reference · not linked from navigation
Content & Button Reference
A living style guide for Marcus Today authors. Every heading, paragraph, list and button on this page is real, rendered markup — find the pattern you need, copy the snippet, paste it into an Elementor HTML widget.
Section 01
How the button classes work
Pick one class from each axis and combine them. Solid and normal are the defaults, so most buttons need only two classes.
<a href="/trial-sign-up" class="mt-btn pink">Free Trial</a>
<a href="/managed-portfolios" class="mt-btn gold large">Explore Portfolios</a>
<a href="/sign-up" class="mt-btn white outline larger">Learn More</a>| Axis | Classes | Default | Notes |
|---|---|---|---|
| Colour | pink gold white navy | — | Required. Use navy on white; white on navy. |
| Style | solid outline | solid | Solid = primary action. Outline = secondary. |
| Size | small normal large larger | normal | larger is for hero sections only. |
| Extras | block on-dark | — | block = full width. on-dark lifts pink & gold for navy backgrounds. |
Where to put it in Elementor
Add an HTML widget and paste the markup. That gives you the exact button with nothing fighting it.
You can instead add mt-btn pink large to the “CSS Classes” field of an Elementor Button or theme Button widget — the stylesheet includes an interop layer for that. If you do, leave the widget’s own Style tab untouched, because Elementor writes those settings as inline styles that will override the class.
The palette
| Colour | Base | Hover | Use for |
|---|---|---|---|
| pink | #E00B5A | #CB1454 | Primary conversion — trials, sign-ups |
| gold | #AB8D4D | #96793E | Managed portfolios / premium |
| navy | #001B71 | #0D1F5C | Default action on white backgrounds |
| white | #FFFFFF | #D4E5F9 | Anything on a navy background |
Section 02
Buttons on light backgrounds
Click any button below → classes copied
Navy — the default action on light backgrounds
Solid
Outline
Pink — primary conversion
Solid
Outline
Gold — managed portfolios / premium
Solid
Outline
Multi-button patterns
The matrix above covers single buttons. These are the layouts that need a wrapper — copy the whole snippet.
Primary + secondary pair
<div class="mt-btn-group">
<a href="/trial-sign-up" class="mt-btn pink large">Start free trial</a>
<a href="/sign-up" class="mt-btn navy outline large">Compare plans</a>
</div>Full width — sidebars, cards, mobile
<a href="/sign-up" class="mt-btn navy block">Subscribe now</a>With an icon
<a href="/contact" class="mt-btn navy outline">
<iconify-icon icon="line-md:phone-loop" width="18" height="18"></iconify-icon>
Contact us
</a>Section 03
Buttons on navy backgrounds
Click any button below → classes copied
White — the default action on navy
Solid
Outline
Pink — primary conversion
Solid
Outline
Gold — managed portfolios / premium
Solid
Outline
Section 04
Typography on white
Headings and body copy render from the theme’s global styles — no extra classes needed. Use headings in order and never skip a level.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Body copy
A lead paragraph — add class="mt-ref-lead" for the larger intro size used under a heading.
Standard body copy. The Marcus Today newsletter covers the ASX daily, with market commentary, stock ideas and model portfolios. This is the default paragraph size and line height, and it’s what the bulk of page content should use.
A second paragraph, to show the spacing between blocks. Inline elements: a standard text link, bold for emphasis, italic for nuance, and inline code.
A note or disclaimer — add class="mt-ref-note". Use for compliance text, footnotes and caveats.
Bulleted list
- Daily market commentary before the open
- Model portfolios with every trade published
- A nested item, for sub-points
- A second nested item
- Stock ideas backed by written research
- Full access to the member archive
Numbered list
- Create your account and confirm your details
- Choose the portfolio that matches your goals
- Transfer funds and let the team manage the rest
Blockquote
The market timing approach means we can, have, and will move to 100% cash to manage risk and avoid precipitous moments in markets.
Section 05
Typography on navy
The same elements on a dark band. Wrap the section in <div class="mt-ref mt-ref-dark"> and text inverts to white automatically.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Body copy
A lead paragraph on navy, for hero and feature bands.
Standard body copy on a dark background. Keep dark sections shorter than white ones — long stretches of reversed-out text are harder to read. Inline: a text link, bold, italic, and inline code.
A note on navy — rendered at reduced opacity rather than a different colour.
Bulleted list
- Market timing — we adjust exposure as conditions change
- Global reach — Australian and international markets
- Complete transparency — every holding, every trade
- Flexible access — add or withdraw funds at any time
Numbered list
- Create your account
- Invest funds
- Let us manage the rest
Blockquote
You own, we manage. You can see every holding and every trade.
Section 06
Do & Don’t
Do use one solid button per section as the primary action, with any others as outline. Two solid buttons competing side by side weakens both.
Do add on-dark to pink and gold whenever they sit on navy.
Do keep larger for hero sections only. In body content it overwhelms the copy around it.
Do write labels as actions — “Start free trial”, not “Click here”.
Don’t use white solid on a white background — it disappears. Use navy instead.
Don’t mix these classes with Bootstrap’s btn btn-primary. They are separate systems and will fight.
Don’t style an mt-btn in Elementor’s Style tab. Elementor writes those as inline styles, which override the class.
Don’t invent new colours. If a page needs something outside pink, gold, navy and white, raise it so it can be added centrally.
Where this lives
| Stylesheet | /wp-content/themes/rhodos-child/css/mt-buttons.css |
|---|---|
| Loaded by | mt_buttons_styles() in the child theme functions.php, priority 999 |
| This page | Page ID 79888 — edit in Elementor, content is in HTML widgets |
Existing buttons elsewhere on the site (the home page hero slider, the header navigation, and older Elementor pages) still use their original styling and are unaffected by this system. They can be migrated page by page.