BlocksCall To Action Block

1import * as React from "react"
2
3export default function Block({
4  subheading,
5  heading,
6  text,
7  buttons,
8  ...props
9}) {
10  return (
11    <section py="6|8|12|20" {...props}>
12      <div variant="container">
13        <div
14          display="flex"
15          flexDirection="column"
16          justifyContent="center"
17          alignItems="center"
18          textAlign="center"
19        >
20          {subheading && (
21            <p color="primary" textTransform="uppercase" m="0">
22              {subheading}
23            </p>
24          )}
25          {heading && (
26            <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
27              {heading}
28            </h1>
29          )}
30          {text && (
31            <p variant="text.lead" mt="2">
32              {text}
33            </p>
34          )}
35          {buttons}
36        </div>
37      </div>
38    </section>
39  )
40}

1import * as React from "react"
2import { Icon } from "reflexjs"
3import Block from "../src/components/call-to-action-002"
4
5export default function Example() {
6  return (
7    <Block
8      subheading="Subheading"
9      heading="Start building today"
10      text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
11      buttons={
12        <a variant="button.accent.lg" href="#" mt="6">
13          Get started <Icon name="arrow-right" ml="2" size="4" />
14        </a>
15      }
16    />
17  )
18}