Components
Built-in MDX components and how to use them.
Bloques ships a set of components for richer content. Drop them directly into any MDX page — no imports needed.
Callout
Highlight an aside, warning, or note in the flow of a page.
Bloques deploys when changes land on the publishing branch.
<Callout type="info">
Bloques deploys when changes land on the publishing branch.
</Callout>Available types: info, warning, error, success, note.
Card
A bordered tile with title, description, icon, and link.
<Card
title="Quickstart"
href="/quickstart"
icon="rocket"
description="Clone this template and publish your docs in five minutes."
/>Card grid
Wrap two or more cards in <Columns> for a responsive grid. Columns collapse on narrow screens.
<Columns cols="2">
<Card title="Writing" href="/essentials/writing" icon="pencil" />
<Card title="Navigation" href="/configuration/navigation" icon="settings" />
</Columns>Steps
A numbered list of stages for walking the reader through a procedure.
Clone the repo
Use the GitHub template to create a copy in your account.
Connect Bloques
Pick your new repo and the publishing branch.
Edit content
Replace the starter pages with your own.<Steps>
<Step title="Clone the repo">
Use the GitHub template to create a copy in your account.
</Step>
<Step title="Connect Bloques">
Pick your new repo and the publishing branch.
</Step>
<Step title="Edit content">Replace the starter pages with your own.</Step>
</Steps>Accordion
A collapsible section for supporting detail. Wrap accordions in <AccordionGroup>.
<AccordionGroup>
<Accordion title="When does the site redeploy?">
On every push to the publishing branch.
</Accordion>
</AccordionGroup>Columns
A multi-column layout for side-by-side content. Columns collapse to one column on narrow screens.
Left column content goes here.
Right column content goes here.
<Columns cols="2">
Left column content goes here.
Right column content goes here.
</Columns>Accepts cols="2", cols="3", or cols="4".
Icon
A standalone glyph from the built-in icon set.
<Icon icon="rocket" color="blue" />Pick a color from gray, green, yellow, red, orange, blue. Common icon names include rocket, pencil, settings, book, globe, branch, code, palette, and component. See the Bloques documentation for the full list.