BlocksCards Block

1import * as React from "react"
2
3export default function Block({
4  subheading,
5  heading,
6  text,
7  buttons,
8  cards,
9  columns = 3,
10  ...props
11}) {
12  return (
13    <section py="4|6|12|20" {...props}>
14      <div variant="container">
15        <div textAlign="center">
16          {subheading && <p variant="subheading">{subheading}</p>}
17          {heading && (
18            <h2 variant="heading.h1" lineHeight="1">
19              {heading}
20            </h2>
21          )}
22          {text && (
23            <p variant="text.lead" mt="2">
24              {text}
25            </p>
26          )}
27        </div>
28        {cards && (
29          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
30            {cards.map((card, index) => (
31              <Card key={index} {...card} />
32            ))}
33          </div>
34        )}
35        {buttons}
36      </div>
37    </section>
38  )
39}
40
41export function Card({ heading, text, link, ...props }) {
42  return (
43    <div borderWidth="1" rounded="lg" p="6" {...props}>
44      <h4 variant="heading.h4">{heading}</h4>
45      {text && (
46        <p variant="text.paragraph text.sm" mt="1">
47          {text}
48        </p>
49      )}
50      {link}
51    </div>
52  )
53}

1import { Icon } from "reflexjs"
2import Block from "../src/components/cards-002"
3
4export default function Example() {
5  return (
6    <Block
7      subheading="Subheading"
8      heading="Unlock your creativity"
9      text="Dicta minus iusto quisquam doloribus temporibus."
10      cards={[
11        {
12          heading: "Marketing Strategies",
13          text:
14            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
15          link: (
16            <a
17              display="inline-flex"
18              alignItems="center"
19              variant="text.link"
20              href="#"
21            >
22              Learn more <Icon name="arrow-right" size="4" ml="2" />
23            </a>
24          ),
25        },
26        {
27          heading: "Business Planning",
28          text:
29            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
30          link: (
31            <a
32              display="inline-flex"
33              alignItems="center"
34              variant="text.link"
35              href="#"
36            >
37              Learn more <Icon name="arrow-right" size="4" ml="2" />
38            </a>
39          ),
40        },
41        {
42          heading: "Premium Support",
43          text:
44            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
45          link: (
46            <a
47              display="inline-flex"
48              alignItems="center"
49              variant="text.link"
50              href="#"
51            >
52              Learn more <Icon name="arrow-right" size="4" ml="2" />
53            </a>
54          ),
55        },
56      ]}
57    />
58  )
59}