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
Back to library
Select a preset:
Go back

Schedule meetings without the back-and-forth

Learn more

High Performance not an afterthought

Learn more

Integrates with your current tech stack

Learn more

How to use this block

  1. Copy the source code and paste it into an .mdx file under content/blocks/NAME-OF-BLOCK.mdx.
  2. Include it in your page using the following code:
<Block src="NAME-OF-BLOCK" />

Using props

You can make this block's content dynamic by using props.

  1. Wrap the content of this block in a named export. Example:
content/blocks/NAME-OF-BLOCK.mdx
export const NameOfBlock = ({heading}) => (
// Add the source code here.
)
  1. Then use props in the block content by replacing the static text with props. Example: <H1>{heading}</H1>.
  2. Include it on your page using the following code:
<Block src="NAME-OF-BLOCK" heading="A Heading" />

You can pass as many props as you need.

Docs

Read more on blocks in the docs.

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github