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|row"
16          justifyContent="space-between"
17          alignItems="flex-start|center"
18        >
19          <div flex="1">
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          </div>
36          {buttons}
37        </div>
38      </div>
39    </section>
40  )
41}

1import * as React from "react"
2import { Icon } from "reflexjs"
3import Block from "../src/components/call-to-action-003"
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}