Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksHero Block

Hero 001
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/hero-001.jsx file.

Block (JavaScript)
1import * as React from "react"
2
3export default function Block({
4 subheading,
5 heading,
6 text,
7 image,
8 imagePosition = "right",
9 buttons,
10 children,
11 ...props
12}) {
13 return (
14 <section py="6|12|20" {...props}>
15 <div variant="container">
16 <div
17 display="grid"
18 gridAutoFlow="dense"
19 col="1|1|2"
20 gap="8|8|12"
21 alignItems="center"
22 >
23 {image && (
24 <img
25 colStart={`null|null|${imagePosition === "left" ? 1 : 2}`}
26 w="full"
27 rounded="lg"
28 overflow="hidden"
29 {...image}
30 />
31 )}
32 <div
33 d="flex"
34 flexDirection="column"
35 alignItems="center|flex-start"
36 textAlign="center|left"
37 >
38 {subheading && <p variant="subheading">{subheading}</p>}
39 {heading && (
40 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
41 {heading}
42 </h1>
43 )}
44 {text && (
45 <p variant="text.lead" mt="2">
46 {text}
47 </p>
48 )}
49 {buttons}
50 {children}
51 </div>
52 </div>
53 </div>
54 </section>
55 )
56}

2. Copy the example code below and add it to your page.

Usage (JavaScript)
1import { Icon } from "reflexjs"
2import Block from "../src/components/hero-001"
3
4export default function Example() {
5 return (
6 <Block
7 subheading="Subheading"
8 heading="Build a better web"
9 text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
10 image={{
11 src: "/images/placeholder.jpg",
12 alt: "Hero image",
13 }}
14 buttons={
15 <div display="inline-grid" col="2" gap="2" mt="4">
16 <a variant="button.primary" href="#">
17 Get started <Icon name="arrow-right" ml="2" size="4" />
18 </a>
19 <a variant="button.secondary" href="#">
20 Learn more
21 </a>
22 </div>
23 }
24 />
25 )
26}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter