BlocksForms Block

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}

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}