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

Style the hero

Add styles to the hero block using style props.

The hero we added does not look like much. We are going to style it using style props.

Styling components in Reflex is as easy as adding attributes to the component, just like HTML.

content/pages/about.mdx

---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Section p="4">
  <Container>
    <Grid col="1fr 250px" gap="8" alignItems="center">
      <Div>
        <H1 my="0" fontSize="4xl">
          Welcome to my site
        </H1>
        <P mt="4">This is the a short description for the page</P>
      </Div>
      <Image src="placeholder.jpg" />
    </Grid>
  </Container>
</Section>

The hero now looks like this.

Preview

Welcome to my site

This is the a short description for the page

Learn more about styling component and creating themes in the theming documentation.

Add a hero Add a block