Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksCards Block

Cards 002
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/cards-002.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, 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}

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

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

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter