Add a block
Using blocks in Reflex allows you to extract and group components into smaller re-usable chunks.
To move the hero we created into a block, start by adding a new block under
/content/blocks/hero.mdx and move the
<Section p="4"><Container><Grid col="1fr 250px" gap="8" alignItems="center"><Div><H1 my="0" fontSize="4xl">Welcome to my site</H1><P mt="4">This is the a short description for the page</P></Div><Image src="placeholder.jpg" /></Grid></Container></Section>
You can now use the new block on the
about.mdx page using the
---title: Welcome to Reflexexcerpt: Description for this page. This is mostly used for the description meta tag.---<Block src="hero" />
When adding a block to a page, you can omit the
/content/blocks path prefix. Reflex will automatically resolve the block using the block name.
Blocks can also be nested in sub-directories and used as follows:
<Block src="about/contact" /> will display the block found at
site└── content└── blocks└── about└── contact.mdx