Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksForms Block

Form 001
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { VisuallyHidden } from "reflexjs"
3
4export default function Block({
5 subheading,
6 heading,
7 text,
8 buttons,
9 ...props
10}) {
11 return (
12 <section py="6|8|12|20" {...props}>
13 <div variant="container">
14 <div display="grid" col="1|2" gap="8|12|16" alignItems="center">
15 <div>
16 {subheading && (
17 <p color="primary" textTransform="uppercase" m="0">
18 {subheading}
19 </p>
20 )}
21 {heading && (
22 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
23 {heading}
24 </h1>
25 )}
26 {text && (
27 <p variant="text.lead" mt="2">
28 {text}
29 </p>
30 )}
31 {buttons}
32 </div>
33 <form
34 display="grid"
35 col="1|repeat(2, auto)"
36 gap="4"
37 mt="4"
38 w="full|auto"
39 >
40 <div>
41 <VisuallyHidden>
42 <label htmlFor="name">Name</label>
43 </VisuallyHidden>
44 <input
45 variant="input"
46 type="text"
47 id="name"
48 name="name"
49 placeholder="Name"
50 />
51 </div>
52 <div>
53 <VisuallyHidden>
54 <label htmlFor="email">Email</label>
55 </VisuallyHidden>
56 <input
57 variant="input"
58 type="email"
59 id="email"
60 name="email"
61 placeholder="Email"
62 />
63 </div>
64 <div>
65 <VisuallyHidden>
66 <label htmlFor="phone">Phone</label>
67 </VisuallyHidden>
68 <input
69 variant="input"
70 type="tel"
71 id="phone"
72 name="phone"
73 placeholder="Phone"
74 />
75 </div>
76 <div>
77 <VisuallyHidden>
78 <label htmlFor="subject">Subject</label>
79 </VisuallyHidden>
80 <select variant="select" id="subject" name="subject">
81 <option value="">Select</option>
82 <option value="one">Option One</option>
83 <option value="two">Option Two</option>
84 </select>
85 </div>
86 <div colStart="span 2">
87 <VisuallyHidden>
88 <label htmlFor="message">Message</label>
89 </VisuallyHidden>
90 <textarea
91 variant="textarea"
92 placeholder="Message"
93 id="message"
94 name="message"
95 rows="5"
96 />
97 </div>
98 <button type="submit" variant="button.primary" colStart="span 2">
99 Send message
100 </button>
101 </form>
102 </div>
103 </div>
104 </section>
105 )
106}

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-001"
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 buttons={
11 <a variant="button.muted" href="#" mt="6">
12 Learn more
13 </a>
14 }
15 />
16 )
17}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter