Development ·
What fits inside an article
This post is a test rig. The prose around it is ordinary Markdown, and everything between the paragraphs is a component from src/components — the same instances the home page uses, rendered inside the article body rather than after it.
An inline component
A component can sit in the middle of a sentence, not only between blocks. Here is the site’s marker link, inline in this paragraph: Back to the blog — same component the nav and the CTA use.
A component taking props
Case study
Peak
A card with its own eyebrow, heading, body and button, given four props from the article body.
Props are written the way they are in any .astro file, and imported images are real assets, so the card’s picture goes through the same optimisation as the cover above.
A component that reads its own layout
MediaCaptionRow is built for the 12-column grid, so it needs a cols container around it and the full width of the page to sit in. Both are one wrapper:
Grid components need the grid. Dropped straight into the text column this row collapses, because its columns are a subgrid of a parent that is not there. Wrapped in a full-width cols container it behaves exactly as it does on a project page.
A component that queries the CMS itself
The section below is HomeTestimonials.astro, unchanged. It runs its own getCollection("testimonials"), builds its WebGL portrait stage, and keeps the Smooothy slider — drag it, or use the arrows.
Our Customers Said
We create beautiful and functional websites that make an impact.
Nothing was passed to it. The component owns its query, so dropping it into a post pulls whatever is in the testimonials collection at build time.
A component fed from the article
Props can be written inline in the body. 
Or bound to frontmatter fields, as the other posts do.
The trade to know about: this file is .mdx, not .md. The prose still edits as prose, but each component is a JSX node rather than rich text, so the CMS treats those the way it treats any markup it does not own — see the two .md posts for the version that stays entirely in fields and rich text.