Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksForms Block

Form 002
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { VisuallyHidden } from "reflexjs"
3
4export default function Block({ subheading, heading, text, ...props }) {
5 return (
6 <section py="6|8|12|20" {...props}>
7 <div variant="container">
8 <div
9 display="flex"
10 flexDirection="column"
11 justifyContent="center"
12 alignItems="center"
13 textAlign="center"
14 >
15 {subheading && (
16 <p color="primary" textTransform="uppercase" m="0">
17 {subheading}
18 </p>
19 )}
20 {heading && (
21 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
22 {heading}
23 </h1>
24 )}
25 {text && (
26 <p variant="text.lead" mt="2">
27 {text}
28 </p>
29 )}
30 <form display="grid" col="1|auto auto" mt="6" gap="4" w="full|auto">
31 <VisuallyHidden>
32 <label htmlFor="email">Email</label>
33 </VisuallyHidden>
34 <input
35 variant="input"
36 type="email"
37 id="form-04-email"
38 name="email"
39 placeholder="Type your email"
40 />
41 <button type="submit" variant="button.primary">
42 Subscribe
43 </button>
44 </form>
45 </div>
46 </div>
47 </section>
48 )
49}

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

Usage (JavaScript)
1import * as React from "react"
2import Block from "../src/components/form-002"
3
4export default function Example() {
5 return (
6 <Block
7 subheading="Subheading"
8 heading="Turn followers into customers"
9 text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
10 />
11 )
12}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter