• 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

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.

<Section p="4">
<Grid col="1fr 250px" gap="8" alignItems="center">
<H1 my="0" fontSize="4xl">
Welcome to my site
<P mt="4">This is the a short description for the page</P>
<Image src="placeholder.jpg" />

You can now use the new block on the about.mdx page using the Block component.

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.

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

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github