BlocksCards Block

1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({
5  subheading,
6  heading,
7  text,
8  buttons,
9  cards,
10  columns = 3,
11  ...props
12}) {
13  return (
14    <section py="4|6|12|20" {...props}>
15      <div variant="container">
16        <div textAlign="center">
17          {subheading && <p variant="subheading">{subheading}</p>}
18          {heading && (
19            <h2 variant="heading.h1" lineHeight="1">
20              {heading}
21            </h2>
22          )}
23          {text && (
24            <p variant="text.lead" mt="2">
25              {text}
26            </p>
27          )}
28        </div>
29        {cards && (
30          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
31            {cards.map((card, index) => (
32              <Card key={index} {...card} />
33            ))}
34          </div>
35        )}
36        {buttons}
37      </div>
38    </section>
39  )
40}
41
42export function Card({
43  heading,
44  text,
45  icon = { name: "check" },
46  link,
47  ...props
48}) {
49  return (
50    <div
51      display="flex"
52      flexDirection="column"
53      textAlign="center"
54      borderWidth="1"
55      rounded="lg"
56      p="8"
57      {...props}
58    >
59      {icon && (
60        <div
61          display="flex"
62          alignItems="center"
63          justifyContent="center"
64          size="18"
65          rounded="full"
66          mb="4"
67          mx="auto"
68          bg={icon.bg || "secondary"}
69        >
70          <Icon size="10" color="white" {...icon} />
71        </div>
72      )}
73      <div flex="1">
74        <h4 variant="heading.h4">{heading}</h4>
75        {text && (
76          <p variant="text.paragraph text.sm" mt="1">
77            {text}
78          </p>
79        )}
80        {link}
81      </div>
82    </div>
83  )
84}

1import { Icon } from "reflexjs"
2import Block from "../src/components/cards-001"
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          icon: {
16            name: "activity",
17          },
18          link: (
19            <a display="inline-flex" alignItems="center" href="#">
20              Learn more <Icon name="arrow-right" size="4" ml="2" />
21            </a>
22          ),
23        },
24        {
25          heading: "Business Planning",
26          text:
27            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
28          icon: {
29            name: "credit-card",
30          },
31          link: (
32            <a display="inline-flex" alignItems="center" href="#">
33              Learn more <Icon name="arrow-right" size="4" ml="2" />
34            </a>
35          ),
36        },
37        {
38          heading: "Premium Support",
39          text:
40            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
41          icon: {
42            name: "gift",
43          },
44          link: (
45            <a display="inline-flex" alignItems="center" href="#">
46              Learn more <Icon name="arrow-right" size="4" ml="2" />
47            </a>
48          ),
49        },
50      ]}
51    />
52  )
53}