Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksCards Block

Cards 003
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/cards-003.jsx file.

Block (JavaScript)
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}

2. Copy the example code below and add it to your page.

Usage (JavaScript)
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}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter