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

How to use this block

  1. Copy the source code and paste it into an .mdx file under content/blocks/header.mdx.
  2. Your site will automatically pick it and display it in the site's header.

Tip

This example has all the code in one file so that it is easy to copy and paste. On your site, you can split this into multiple blocks and compose them together.

Example: Extract the nav into its own content/blocks/header-nav.mdx block. Then use in as follows:

// content/blocks/header.mdx
...
export const HeaderBlock = ({ ...props }) => {
...
<Block src="branding" />
<Block src="header-nav" />
...
}
...

Read more

Read more on blocks in the docs.

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github