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, image, link, ...props }) {
42  return (
43    <div borderWidth="1" rounded="lg" p="6" {...props}>
44      {image && <img w="full" mb="4" rounded="md" {...image} />}
45      <h4 variant="heading.h4">{heading}</h4>
46      {text && (
47        <p variant="text.paragraph text.sm" mt="1">
48          {text}
49        </p>
50      )}
51      {link}
52    </div>
53  )
54}

1import { Icon } from "reflexjs"
2import Block from "../src/components/cards-003"
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          image: {
16            src: "/images/placeholder.jpg",
17            alt: "Image",
18          },
19          link: (
20            <a
21              display="inline-flex"
22              alignItems="center"
23              variant="text.link"
24              href="#"
25            >
26              Learn more <Icon name="arrow-right" size="4" ml="2" />
27            </a>
28          ),
29        },
30        {
31          heading: "Business Planning",
32          text:
33            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
34          image: {
35            src: "/images/placeholder.jpg",
36            alt: "Image",
37          },
38          link: (
39            <a
40              display="inline-flex"
41              alignItems="center"
42              variant="text.link"
43              href="#"
44            >
45              Learn more <Icon name="arrow-right" size="4" ml="2" />
46            </a>
47          ),
48        },
49        {
50          heading: "Premium Support",
51          text:
52            "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
53          image: {
54            src: "/images/placeholder.jpg",
55            alt: "Image",
56          },
57          link: (
58            <a
59              display="inline-flex"
60              alignItems="center"
61              variant="text.link"
62              href="#"
63            >
64              Learn more <Icon name="arrow-right" size="4" ml="2" />
65            </a>
66          ),
67        },
68      ]}
69    />
70  )
71}