• 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


Group components together in a block and use them on pages.

Add a block

To add a block, simply create an .mdx file in the /content/blocks directory.

└── content
└── blocks
└── card.mdx
<Div borderWidth="1px" rounded="5px">
<Image src="placeholder.jpg" />
<Div p="6">
<H4 my="0">Heading</H4>
<P mb="0">This is some text.</P>

Using blocks

To use a block on a page, add the block using the block name.

// This will display the block at content/blocks/card.mdx
<Block src="card" />

Styling blocks

Blocks can be styled like any other component. Simply pass the style as props.

<Block src="card" bg="primary" color="white" />

Dynamic blocks

Blocks can accept props and this makes blocks really powerful.

Wrap the card block we created in a named export.

export const Card = ({ heading, text, image }) => (
<Div borderWidth="1px" rounded="5px">
<Image src={image} />
<Div p="6">
<H4 my="0">{heading}</H4>
<P mb="0">{text}</P>
Using props with blocks
<Grid col="2" gap="4">
<Block src="card" heading="Heading One" text="This is the card one." />
<Block src="card" heading="Heading One" text="This is the card two." />


The useBlock hook can be used to retrieve and filter blocks.

import { useBlock } from "@reflexjs/gatsby-theme-block"
// Returns the block from /content/blocks/branding.
const [branding] = useBlock("branding")
// Returns the block from /content/blocks/shared/bio.
const [bio] = useBlock("shared/bio")

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github