Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksFeatures Block

Features 001
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/features-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 features,
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 {features && (
30 <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
31 {features.map((feature, index) => (
32 <Feature key={index} {...feature} />
33 ))}
34 </div>
35 )}
36 {buttons}
37 </div>
38 </section>
39 )
40}
41
42export function Feature({
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/features-001"
3
4export default function Example() {
5 return (
6 <Block
7 subheading="Subheading"
8 heading="Getting started"
9 text="Discover the tool that drives engagement and productivity."
10 features={[
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 heading: "Consulting",
52 text:
53 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
54 icon: {
55 name: "users",
56 },
57 link: (
58 <a display="inline-flex" alignItems="center" href="#">
59 Learn more <Icon name="arrow-right" size="4" ml="2" />
60 </a>
61 ),
62 },
63
64 {
65 heading: "Development",
66 text:
67 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
68 icon: {
69 name: "code",
70 },
71 link: (
72 <a display="inline-flex" alignItems="center" href="#">
73 Learn more <Icon name="arrow-right" size="4" ml="2" />
74 </a>
75 ),
76 },
77 {
78 heading: "Analysis",
79 text:
80 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
81 icon: {
82 name: "trending-up",
83 },
84 link: (
85 <a display="inline-flex" alignItems="center" href="#">
86 Learn more <Icon name="arrow-right" size="4" ml="2" />
87 </a>
88 ),
89 },
90 ]}
91 buttons={
92 <div display="flex" alignItems="center" justifyContent="center" gap="4">
93 <a variant="button.primary" href="#">
94 Get started
95 <Icon name="arrow-right" ml="2" size="4" />
96 </a>
97 <a variant="button.secondary" href="#">
98 Learn more
99 </a>
100 </div>
101 }
102 />
103 )
104}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter