Reflex
  • 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
arshadcnv0.5.3
Reflex
Reflex

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 heroAdd a block

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github