Every shortcode you can use in a story or any other MDX file, each with the code that produces it. The list lives in src/lib/shortcodes.ts. The sample text below is about a school-kit packing day; replace it with your own.
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="Label the boxes before you fill them">
Write the school name and the age group on each box first. It saves an hour
of sorting at the end of the day.
</Callout>Note
Kits are packed in the week before term starts, so the schools can hand them out on the first day.
Label the boxes before you fill them
Write the school name and the age group on each box first. It saves an hour of sorting at the end of the day.
Warning
Do not accept opened food or medicine as donations. We cannot check them, so we cannot hand them out.
Lift with two people
A full box of exercise books weighs more than 15 kg. Lift it with a partner and keep the aisles clear.
<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>
### Sort the donations
Check every item against the kit list and set aside anything worn or broken.
### Pack the backpacks
One of each item per backpack, then a card with the child's age group.
### Load the van
Boxes for the same school go together, with the delivery sheet on top.
</Steps>Sort the donations
Check every item against the kit list and set aside anything worn or broken.
Pack the backpacks
One of each item per backpack, then a card with the child’s age group.
Load the van
Boxes for the same school go together, with the delivery sheet on top.
Checklist
<ListCheck> turns a Markdown list into a checklist. Add columns={2} for two columns on wider screens.
<ListCheck columns={2}>
- **Backpack**: sized for the age group.
- **Exercise books**: four lined, one squared.
- **Pencil case**: pencils, eraser, ruler, and sharpener.
- **Water bottle**: with the child's name label.
</ListCheck>- Backpack: sized for the age group.
- Exercise books: four lined, one squared.
- Pencil case: pencils, eraser, ruler, and sharpener.
- Water bottle: with the child’s name label.
Button
<Button label="Donate" url="/donate/" />
<Button variant="outline" label="Contact us" url="/contact/" />
<Button variant="text" label="See all appeals" url="/causes/" />Accordion
Rows with the same group close each other. expanded="true" opens a row on load.
<Accordion label="Do I need experience to help on a packing day?" group="packing" expanded="true">
No. A team lead explains each table at the start, and every job can be learned in ten minutes.
</Accordion>Do I need experience to help on a packing day?
No. A team lead explains each table at the start, and every job can be learned in ten minutes.
Can I bring my children?
Yes, from the age of eight, with an adult. Younger children can help at the label table.
What should I wear?
Closed shoes and clothes you can lift in. We provide gloves and an apron.
Tabs
<Tabs>
<Tab name="Primary">
Backpack, four exercise books, pencil case, and a reading book.
</Tab>
<Tab name="Secondary">
Backpack, six exercise books, geometry set, and a calculator.
</Tab>
</Tabs>Backpack, four exercise books, pencil case, and a reading book.
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/photos/event-packing-day.jpg"
imageAlt="Volunteers handing sacks across a table of supplies"
caption="The packing tables at nine in the morning."
/>
<ImageItem
width="1/2"
imageSrc="/images/photos/gallery-pencil-boxes.jpg"
imageAlt="Boxes full of new yellow pencils"
caption="Pencils sorted before packing."
/>
<ImageItem
width="1/2"
imageSrc="/images/photos/cause-school-supplies.jpg"
imageAlt="Notebooks and coloured pencils on a table"
caption="One complete primary kit."
/>
</ImageList>
Video
<VideoInline src="rFVpSwgCkCo" provider="youtube" />
<VideoInline src="/videos/test-video.mp4" provider="html5" poster="/images/video-thumbnail.jpg" />Text
Bold with **, italic with _, struck through with ~~, and inline code with backticks. Links use [text](/url/): our current appeals.
A blockquote starts with
>. Use it for a short quote from a volunteer, a donor, or a partner.
| Table | Volunteers | Kits an hour |
|---|---|---|
| Sorting | 6 | 120 |
| Packing | 8 | 90 |
| Labelling | 2 | 90 |
## Heading 2 [.custom-class]
### Heading 3Add classes to a heading in brackets, for example [.h5] for a smaller size.
