Blocks

Using blocks to build pages.

Create a block

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

Blocks are placed in the content/blocks directory.

Add a new card.mdx block.

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

Add the following content to it.

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

You can read more on the Image component and images in the docs.

Use the block on a page.

To use a block, you use the Block component and the block name.

<Block src="card" />

Heading

This is some text.

Theming Dynamic blocks