Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

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 hero there.

content/blocks/hero.mdx
<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 Block component.

content/pages/about.mdx
---
title: Welcome to Reflex
excerpt: 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 /content/blocks/about/contact.

site
└── content
└── blocks
└── about
└── contact.mdx
Style the heroDynamic Blocks

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github