Components
Use these components in any Markdown or MDX page, such as a service page, a project story, or a solar guide. Button and Notice are imported automatically, so you can write them straight into the page.
Buttons
Buttons take a label, a url, and a variant: fill, outline, or text. Add class="btn-accent" for the citrus fill, and an icon with any Lucide icon name.
Buttons with an icon and a hover effect (text-flip, creative-fill, magnetic, or magnetic-text-flip):
Notices
A notice highlights one short point. Set type to info, success, warning, or error, and add an optional title.
Good to know
Panels still produce on cloudy days, just less. Yearly output estimates already account for typical weather.
Grid connection approved
Your system can be switched on. We’ll book the commissioning visit within the week.
Check your roof first
A roof that needs work in the next five years should be repaired before the panels go on. Lifting an array later costs around two days of labour.
Inverter fault
If the inverter shows a red light for more than an hour, switch it off at the isolator and send us a photo of the screen.
Accordion
A native <details> element opens and closes with a smooth height animation. Add open to show it expanded on load.
How long does an install take?
Most homes take one or two days on the roof, plus a short visit to commission the system.
Do I need planning permission?
Usually not for a pitched roof. We check the rules for your address before we quote.
Count-up numbers
Add data-count to any element and its first number counts up when it scrolls into view. Prefixes, suffixes, and separators stay as written.
1,400+
Homes powered
98%
On-time installs
25 yr
Panel warranty
Icons
Icons draws any Lucide icon by name at build time, so pages ship no icon JavaScript.
Avatar stack
Overlapping round photos for a trust line next to a button or a rating.




Tags
Blog tags as pills. Pass tags to show only some of them.
Savings calculator
The full calculator reads its defaults from the calculator section content. Pass config to override any value for one page.
Estimate your savings
- System size
- 5.7 kWp
- Yearly savings
- $1,944
- Payback
- 5.5 years
- CO₂ avoided
- 2.6 t / year
Estimate only. Your survey confirms roof space, shading, and local tariffs.
Monitoring panel
An app-style mockup drawn in HTML and SVG. Its text and figures live in the monitoring panel content file.
Home system · 6.4 kWp
Today, updated 2 min ago
- Produced today
- 24.6 kWh
- Used at home
- 78%
- Battery
- 86%
Production vs usage
All panels producing16 of 16 panels online
Text formatting
Regular Markdown works on every page. Use headings to split a long guide, lists for steps, and tables for figures.
Steps
- Send us twelve months of energy bills.
- We visit, measure the roof, and check the meter board.
- You get a layout, a fixed price, and a payback estimate.
Figures
| System size | Panels | Yearly output |
|---|---|---|
| 4 kWp | 10 | 3,800 kWh |
| 6 kWp | 15 | 5,700 kWh |
| 8 kWp | 20 | 7,600 kWh |
Quote
The panels covered our bills from April to September, and the battery got us through the evenings.
Text can be bold, italic, or a link to the FAQ.

Find out what your roof can save
Book a free roof survey. You get a panel layout, a fixed price, and yearly savings within two working days.