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.

Solar Storage EV charging Warranty

Avatar stack

Overlapping round photos for a trust line next to a button or a rating.

Trusted by 600+ households

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

$180
$50$600
of your usage covered90%
System size
5.7 kWp
Yearly savings
$1,944
Payback
5.5 years
CO₂ avoided
2.6 t / year
Get my exact quote

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

Live
Produced today
24.6 kWh
Used at home
78%
Battery
86%

Production vs usage

ProductionHome usage

All panels producing16 of 16 panels online

What you see in the app after we service your system: today's output, how much you used yourself, and the battery level.

Text formatting

Regular Markdown works on every page. Use headings to split a long guide, lists for steps, and tables for figures.

Steps

  1. Send us twelve months of energy bills.
  2. We visit, measure the roof, and check the meter board.
  3. You get a layout, a fixed price, and a payback estimate.

Figures

System sizePanelsYearly output
4 kWp103,800 kWh
6 kWp155,700 kWh
8 kWp207,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.

Aerial view of a solar array in green fields
Free roof survey

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.

Buy NowTheme Details