Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksCards Block

Cards 001
View fullscreen

How to use this block

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

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

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

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

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter