Block reference
The MDX components that SHIP Sites content can use, with the props of each website block.
Content uses only the components on the allow-list, and the components that mdxComponents in the site config names. The build parses each MDX file and stops on any other component name. A name inside a code block does not count.
All blocks take their colours and fonts from the theme, so a block looks like your brand with no props for style.
Website blocks
A website page is mostly blocks. Each block draws its own full-width band. Plain Markdown between two blocks sits in the page column.
---
title: Home
description: What we do and how to start.
---
<Hero
title="Everything you need, in one place"
subtitle="Book, pay and keep track without a phone call."
primary={{ label: "Get started", href: "/pricing/" }}
/>An action is { label, href }. An image is { src, alt }. A prop with a question mark is optional.
Hero
The first band of a page: a large title, a line under it and up to two actions.
| Prop | Type |
|---|---|
title | string |
subtitle? | string |
primary? | action |
secondary? | action |
image? | image |
FeatureGrid
Cards in a grid, each with a title and a short text.
| Prop | Type |
|---|---|
title? | string |
intro? | string |
items | array of { title, text } |
Steps
Numbered cards when you give items. With children, it is the numbered steps of a docs page, with a Step for each step.
| Prop | Type |
|---|---|
title? | string |
items? | array of { title, text } |
Pricing
Plan cards. A plan with highlight has a border in the primary colour.
| Prop | Type |
|---|---|
title? | string |
intro? | string |
plans | array of { name, price, period?, description?, features, action, highlight? } |
Testimonials
Quotes from customers.
| Prop | Type |
|---|---|
title? | string |
items | array of { quote, name, role? } |
LogoCloud
A row of logos, each with an optional link.
| Prop | Type |
|---|---|
title? | string |
logos | array of { src, alt, href? } |
Stats
Large numbers, each with a label.
| Prop | Type |
|---|---|
title? | string |
items | array of { value, label } |
Faq
Questions that open to show the answer. The block also writes the questions as FAQPage structured data, from the same text that the page shows.
| Prop | Type |
|---|---|
title? | string |
items | array of { q, a } |
CallToAction
A band with a title, a short text and one action.
| Prop | Type |
|---|---|
title | string |
text? | string |
action | action |
Team
People with their roles and optional photos.
| Prop | Type |
|---|---|
title? | string |
members | array of { name, role, image? } |
Contact
An email link, a phone link and an address.
| Prop | Type |
|---|---|
title? | string |
email? | string |
phone? | string |
address? | string |
Components for any page
These components work in pages, posts and docs.
| Component | Use |
|---|---|
Callout | A note in a box. |
Figure | An image with a caption. Props: src, alt, caption?. |
Image | An image that opens larger on a click. |
LinkCard | A card that links to a page. Props: title, href, description?. |
Steps and Step | Numbered steps. |
Tabs and Tab | Content in tabs. Tabs takes items, and each Tab takes a value. |
CodeGroup | Code blocks in tabs. |
Video | A video file with the browser's controls. Props: src, poster?, caption?. |
A Markdown alert, such as > [!TIP], shows as a callout too.
How is this page?