Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

BlocksHero Block

Hero 003
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { VisuallyHidden } from "reflexjs"
3
4export default function Block({ subheading, heading, text, image, ...props }) {
5 return (
6 <section py="6|8|12|20" position="relative" {...props}>
7 <div variant="container">
8 <div display="grid" col="1|2" gap="8|12|16">
9 {image && (
10 <img
11 position="static|absolute"
12 top="0"
13 right="0"
14 w="full|half"
15 h="40|full"
16 {...image}
17 />
18 )}
19 <div
20 display="flex"
21 flexDirection="column"
22 alignItems="center|flex-start"
23 textAlign="center|left"
24 py="0|12|16"
25 >
26 {subheading && (
27 <p color="primary" textTransform="uppercase" m="0">
28 {subheading}
29 </p>
30 )}
31 {heading && (
32 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="1">
33 {heading}
34 </h1>
35 )}
36 {text && (
37 <p variant="text.lead" mt="2">
38 {text}
39 </p>
40 )}
41 <form display="grid" mt="4" col="auto auto" gap="2" w="full|auto">
42 <div flex="1">
43 <VisuallyHidden>
44 <label htmlFor="email">Email</label>
45 </VisuallyHidden>
46 <input
47 variant="input.lg"
48 type="email"
49 id="email"
50 name="email"
51 placeholder="Type your email"
52 />
53 </div>
54 <button type="submit" variant="button.secondary.lg">
55 Join now
56 </button>
57 </form>
58 </div>
59 </div>
60 </div>
61 </section>
62 )
63}

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

Usage (JavaScript)
1import * as React from "react"
2import Block from "../src/components/hero-003"
3
4export default function Example() {
5 return (
6 <Block
7 subheading="Subheading"
8 heading="Build something amazing"
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 />
15 )
16}

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub