Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksFeatures Block

Features 003
View fullscreen

How to use this block

1. Copy the block source code and place it in a src/components/features-003.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 image,
9 features,
10 ...props
11}) {
12 return (
13 <section py="4|6|12|20" position="relative" {...props}>
14 <div variant="container">
15 <div display="grid" col="1|1|480px 1fr" gap="6|6|10">
16 <div>
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 {image && (
29 <img
30 position="relative||absolute"
31 w="full||half"
32 h="auto||full"
33 top="0"
34 right="0"
35 rounded="lg||none"
36 mt="4|6|0"
37 {...image}
38 />
39 )}
40 {features && (
41 <div display="grid" gap="4|6|8" mt="8|10|12">
42 {features.map((feature, index) => (
43 <Feature key={index} {...feature} />
44 ))}
45 </div>
46 )}
47 </div>
48 </div>
49 </div>
50 </section>
51 )
52}
53
54export function Feature({ heading, text, icon = { name: "check" }, ...props }) {
55 return (
56 <div display="flex" alignItems="flex-start" {...props}>
57 {icon && (
58 <div
59 display="flex"
60 alignItems="center"
61 justifyContent="center"
62 size="18"
63 rounded="full"
64 mb="4"
65 mx="auto"
66 bg={icon.bg || "primary"}
67 >
68 <Icon size="8" color="background" {...icon} />
69 </div>
70 )}
71 <div flex="1" ml="4">
72 <h4 variant="heading.h4">{heading}</h4>
73 {text && (
74 <p variant="text.paragraph text.sm" mt="1">
75 {text}
76 </p>
77 )}
78 </div>
79 </div>
80 )
81}

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

Usage (JavaScript)
1import Block from "../src/components/features-003"
2
3export default function Example() {
4 return (
5 <Block
6 subheading="Subheading"
7 heading="Getting started"
8 text="Discover the tool that drives engagement and productivity."
9 features={[
10 {
11 heading: "Marketing Strategies",
12 text:
13 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
14 icon: {
15 name: "activity",
16 },
17 },
18 {
19 heading: "Business Planning",
20 text:
21 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
22 icon: {
23 name: "credit-card",
24 },
25 },
26 {
27 heading: "Premium Support",
28 text:
29 "Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
30 icon: {
31 name: "gift",
32 },
33 },
34 ]}
35 image={{
36 src: "/images/placeholder.jpg",
37 alt: "Hero image",
38 }}
39 />
40 )
41}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter