Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksPricing Block

Pricing 002
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2
3export default function Block({ subheading, heading, text, items, ...props }) {
4 return (
5 <section py="4|6|12|20" {...props}>
6 <div variant="container">
7 <div textAlign="center">
8 {subheading && <p variant="subheading">{subheading}</p>}
9 {heading && (
10 <h2 variant="heading.h1" lineHeight="1">
11 {heading}
12 </h2>
13 )}
14 {text && (
15 <p variant="text.lead" mt="4">
16 {text}
17 </p>
18 )}
19 </div>
20 {items && (
21 <div
22 display="grid"
23 col="1|2|3"
24 mt="4|6|8"
25 gap="4|6|0"
26 borderTopWidth="5"
27 borderTopColor="primary"
28 >
29 {items.map((item, index) => (
30 <Pricing key={index} {...item} />
31 ))}
32 </div>
33 )}
34 </div>
35 </section>
36 )
37}
38
39export function Pricing({ heading, price, description, isSelected, ...props }) {
40 return (
41 <div
42 bg={isSelected ? "muted" : "background"}
43 textAlign="center"
44 borderWidth="1px"
45 px="4|4|8|10"
46 py="8|8|12"
47 {...props}
48 >
49 <h3 variant="heading.h2" m="0">
50 {heading}
51 </h3>
52 <p variant="text.paragraph" mt="4" lineHeight="normal">
53 {description}
54 </p>
55 <div display="flex" mt="6|8" alignItems="center" justifyContent="center">
56 <span fontSize="6xl" fontWeight="semibold">
57 ${price}
58 </span>
59 <span fontSize="xs" ml="4">
60 per user <br /> per month
61 </span>
62 </div>
63 <button
64 variant={`button.${isSelected ? "primary" : "muted"}`}
65 mt="6|8"
66 w="100%"
67 >
68 Select Plan
69 </button>
70 </div>
71 )
72}

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-002"
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 },
16 {
17 heading: "Plus",
18 isSelected: true,
19 description:
20 "For larger businesses with advanced administration tools",
21 price: "299",
22 },
23 {
24 heading: "Custom",
25 description:
26 "For very large businesses or those in highly regulated industries",
27 price: "499",
28 },
29 ]}
30 />
31 )
32}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter