Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksFeatures Block

Features 002
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/features-002.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 ...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 {features && (
29 <div display="grid" col={`1|2|2|3`} gap="4|8|10|12" my="8|12">
30 {features.map((feature, index) => (
31 <Feature key={index} {...feature} />
32 ))}
33 </div>
34 )}
35 {buttons}
36 </div>
37 </section>
38 )
39}
40
41export function Feature({ heading, text, icon = { name: "check" }, ...props }) {
42 return (
43 <div display="flex" alignItems="flex-start" {...props}>
44 {icon && (
45 <div
46 display="flex"
47 alignItems="center"
48 justifyContent="center"
49 size="18"
50 rounded="full"
51 mb="4"
52 mx="auto"
53 bg={icon.bg || "muted"}
54 >
55 <Icon size="8" color="text" {...icon} />
56 </div>
57 )}
58 <div flex="1" ml="4">
59 <h4 variant="heading.h4">{heading}</h4>
60 {text && (
61 <p variant="text.paragraph text.sm" mt="1">
62 {text}
63 </p>
64 )}
65 </div>
66 </div>
67 )
68}

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

Usage (JavaScript)
1import { Icon } from "reflexjs"
2import Block from "../src/components/features-002"
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 },
19 {
20 heading: "Business Planning",
21 text:
22 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
23 icon: {
24 name: "credit-card",
25 },
26 },
27 {
28 heading: "Premium Support",
29 text:
30 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
31 icon: {
32 name: "gift",
33 },
34 },
35 {
36 heading: "Consulting",
37 text:
38 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
39 icon: {
40 name: "users",
41 },
42 },
43 {
44 heading: "Development",
45 text:
46 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
47 icon: {
48 name: "code",
49 },
50 },
51 {
52 heading: "Analysis",
53 text:
54 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
55 icon: {
56 name: "trending-up",
57 },
58 },
59 ]}
60 buttons={
61 <div display="flex" alignItems="center" justifyContent="center" gap="4">
62 <a variant="button.primary" href="#">
63 Get started
64 <Icon name="arrow-right" ml="2" size="4" />
65 </a>
66 <a variant="button.secondary" href="#">
67 Learn more
68 </a>
69 </div>
70 }
71 />
72 )
73}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter