BlocksForms Block

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}

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}