Dynamic blocks

Using props in blocks.

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>

Heading One

This is the card one.

Heading One

This is the card two.

Blocks Navs