We are adding support for Nextjs. Get in touch on Twitter to learn more.

Blocks

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.

mysite
  └── content
    └── blocks
      └── card.mdx

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>
  </Div>
</Div>

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>
    </Div>
  </Div>
)

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." />
</Grid>

useBlock

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")

Components Navs