Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksPricing Block

Pricing 001
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { Icon } from "reflexjs"
3
4export default function Block({ subheading, heading, text, items, ...props }) {
5 return (
6 <section py="4|6|12|20" {...props}>
7 <div variant="container">
8 <div textAlign="center">
9 {subheading && <p variant="subheading">{subheading}</p>}
10 {heading && (
11 <h2 variant="heading.h1" lineHeight="1">
12 {heading}
13 </h2>
14 )}
15 {text && (
16 <p variant="text.lead" mt="4">
17 {text}
18 </p>
19 )}
20 </div>
21 {items && (
22 <div display="grid" col="1|2|3" mt="4|6|8" gap="4|6|0">
23 {items.map((item, index) => (
24 <Pricing key={index} {...item} />
25 ))}
26 </div>
27 )}
28 </div>
29 </section>
30 )
31}
32
33export function Pricing({
34 heading,
35 price,
36 description,
37 list,
38 isSelected,
39 ...props
40}) {
41 return (
42 <div
43 display="flex"
44 flexDirection="column"
45 alignItems="center"
46 borderWidth={isSelected ? 4 : 1}
47 borderColor={isSelected ? "primary" : "border"}
48 rounded="lg"
49 px="4|6|8"
50 py={isSelected ? "4|6|16" : "4|6|8"}
51 my={isSelected ? 0 : "0|0|8"}
52 {...props}
53 >
54 <h3 variant="heading.h3" m="0">
55 {heading}
56 </h3>
57 <p display="flex" alignItems="flex-end" mt="6">
58 <span fontSize="6xl" fontWeight="semibold" lineHeight="none">
59 ${price}
60 </span>
61 <span>/ month</span>
62 </p>
63 <p variant="text" textAlign="center" mt="6" mb="0">
64 {description}
65 </p>
66 <ul listStyle="none" p="0" mt="4" flex="1">
67 {list.map((listItem, index) => (
68 <li
69 key={index}
70 fontWeight="semibold"
71 display="flex"
72 alignItems="center"
73 mb="2"
74 >
75 <Icon name="check" mr="2" color="primary" />
76 {listItem}
77 </li>
78 ))}
79 </ul>
80 <button
81 variant={`button.${isSelected ? "primary" : "muted"}`}
82 mt="8"
83 w="full"
84 >
85 Select Plan
86 </button>
87 </div>
88 )
89}

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

Usage (JavaScript)
1import * as React from "react"
2import Block from "../src/components/pricing-001"
3
4export default function Example() {
5 return (
6 <Block
7 subheading="Subheading"
8 heading="Choose your plan"
9 text="Start building for free, and upgrade anytime to unlock other features."
10 items={[
11 {
12 heading: "Basic",
13 description: "For small and medium-sized businesses",
14 price: "49",
15 list: [
16 "Lorem ipsum dolor sit amet",
17 "Consectetur adipiscing",
18 "Accumsan tincidunt",
19 ],
20 roundedRight: "null|null|none",
21 borderRight: "null|null|none",
22 },
23 {
24 heading: "Plus",
25 isSelected: true,
26 description:
27 "For larger businesses with advanced administration tools",
28 price: "299",
29 list: [
30 "Lorem ipsum dolor sit amet",
31 "Consectetur adipiscing",
32 "Nulla porttitor",
33 "Accumsan tincidunt",
34 ],
35 },
36 {
37 heading: "Custom",
38 description:
39 "For very large businesses or those in highly regulated industries",
40 price: "499",
41 list: [
42 "Lorem ipsum dolor sit amet",
43 "Consectetur adipiscing",
44 "Nulla porttitor",
45 "Accumsan tincidunt",
46 ],
47 roundedLeft: "null|null|none",
48 borderLeft: "null|null|none",
49 },
50 ]}
51 />
52 )
53}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter