Every shortcode you can use in a blog post or any other MDX file, each with the code that produces it. The list lives in src/lib/shortcodes.ts.
Callout
Pull a tip or a warning out of the text. type is note (default), tip, warning, or danger. Without a title, the type name is shown.
<Callout type="tip" title="Find the shut-off valve first">
Before you touch a tap or a toilet, turn off the small valve under it and
check that the water has stopped.
</Callout>Note
A running toilet usually needs a new flapper, not a new toilet. The part costs a few dollars.
Find the shut-off valve first
Before you touch a tap or a toilet, turn off the small valve under it and check that the water has stopped.
Warning
Never pour a chemical drain opener into a drain that is fully blocked. It sits in the pipe and can damage old joints.
Turn off the power and the gas first
Before you drain a water heater, switch off the breaker or set the gas valve to pilot. A dry element burns out in seconds.
<Notice> still works and renders the same callout: info → note, success → tip, warning → warning, error → danger.
Steps
Wrap headings in <Steps> to number them. Each ## or ### heading starts a step, and everything below it belongs to that step.
<Steps>
### Shut off the water
Turn the valve under the sink clockwise until it stops, then open the tap to release the pressure.
### Replace the cartridge
Pull the handle, unscrew the retaining nut, and take the old cartridge to the shop to match it.
### Test for leaks
Turn the water back on slowly and hold a dry paper towel under each joint for a minute.
</Steps>Shut off the water
Turn the valve under the sink clockwise until it stops, then open the tap to release the pressure.
Replace the cartridge
Pull the handle, unscrew the retaining nut, and take the old cartridge to the shop to match it.
Test for leaks
Turn the water back on slowly and hold a dry paper towel under each joint for a minute.
Checklist
<ListCheck> turns a Markdown list into a checklist. Add columns={2} for two columns on wider screens.
<ListCheck columns={2}>
- **Water heater**: anode rod checked, tank flushed.
- **Shut-off valves**: each one turned and checked for drips.
- **Drains**: P-traps cleared, flow tested.
- **Toilets**: flapper, fill valve, and wax ring seal.
</ListCheck>- Water heater: anode rod checked, tank flushed.
- Shut-off valves: each one turned and checked for drips.
- Drains: P-traps cleared, flow tested.
- Toilets: flapper, fill valve, and wax ring seal.
Job ticket
<JobTicket> shows a checklist as a job ticket. Each list item becomes a checked row. total is free text; with service and no total, the ticket shows that service’s “from” price from the rate card, and a “Get a price” button opens the estimator with the service selected.
<JobTicket title="Before the plumber arrives" code="TIP-021" label="Drain call" service="drain-cleaning">
- Empty the cabinet under the sink
- Find the main shut-off valve
- Leave a key or a door code
</JobTicket>No. TIP-021
Drain call
Before the plumber arrives
- Empty the cabinet under the sink
- Find the main shut-off valve
- Leave a key or a door code
From$129
Price band
<PriceCta> is the line that ends every blog post: the service’s “from” price and a button to the estimator. Blog posts show it on their own from the service field in the front matter; use the shortcode on other pages.
<PriceCta service="water-heater-repair" />Button
<Button label="Book a plumber" url="/book/" />
<Button variant="outline" label="Call us" url="/contact/" />
<Button variant="text" label="See all services" url="/services/" />Accordion
Rows with the same group close each other. expanded="true" opens a row on load.
<Accordion label="Does someone have to be in during the visit?" group="visit" expanded="true">
Someone should approve the written price. After that, leave a key or a door code and we text you photos when we leave.
</Accordion>Does someone have to be in during the visit?
Someone should approve the written price. After that, leave a key or a door code and we text you photos when we leave.
Do you bring the parts?
Yes: the van carries common valves, cartridges, traps, and supply lines. Anything else we order and tell you the cost first.
What if the repair fails?
Tell us and we come back and fix it free under the one-year labour warranty.
Tabs
<Tabs>
<Tab name="Kitchen">
Check the supply lines, tighten the P-trap, test the dishwasher drain hose.
</Tab>
<Tab name="Bathroom">
Replace the toilet flapper, reseal the tub spout, check the shower valve for
drips.
</Tab>
</Tabs>Check the supply lines, tighten the P-trap, and test the dishwasher drain hose.
Image list
Photos in a grid, with an optional caption under each. width="1/2" or "1/3" sets the share of the row; videoSrc adds a play button.
<ImageList>
<ImageItem
imageSrc="/images/blog/frozen-pipes.jpg"
imageAlt="Icicles on an outdoor pipe"
caption="Hold the fitting while you turn the nut."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/slow-drain.jpg"
imageAlt="Water draining from a white basin"
caption="A slow drip behind the tile shows here first."
/>
<ImageItem
width="1/2"
imageSrc="/images/blog/leak-signs.jpg"
imageAlt="Water meters on supply pipes"
caption="Check under the sink once a month."
/>
</ImageList>
Video
<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/heroes/plumber-kitchen-sink-wide.jpg" />Text
Bold with **, italic with _, struck through with ~~, and inline code with backticks. Links use [text](/url/): our services.
A blockquote starts with
>. Use it for a short quote from a customer or a plumber.
| Job | Time | Plumbers |
|---|---|---|
| Water heater swap | 3 h | 2 |
| Toilet repair | 1 h | 1 |
| Tap cartridge | 45 min | 1 |
## Heading 2 [.custom-class]
### Heading 3Add classes to a heading in brackets, for example [.h5] for a smaller size.
