Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

BlocksCards Block

Cards 001
View fullscreen

How to use this block

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

Block (JavaScript)
import * as React from "react"
import { Icon } from "reflexjs"
export default function Block({
subheading,
heading,
text,
buttons,
cards,
columns = 3,
...props
}) {
return (
<section py="4|6|12|20" {...props}>
<div variant="container">
<div textAlign="center">
{subheading && <p variant="subheading">{subheading}</p>}
{heading && (
<h2 variant="heading.h1" lineHeight="1">
{heading}
</h2>
)}
{text && (
<p variant="text.lead" mt="2">
{text}
</p>
)}
</div>
{cards && (
<div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
{cards.map((card, index) => (
<Card key={index} {...card} />
))}
</div>
)}
{buttons}
</div>
</section>
)
}
export function Card({
heading,
text,
icon = { name: "check" },
link,
...props
}) {
return (
<div
display="flex"
flexDirection="column"
textAlign="center"
borderWidth="1"
rounded="lg"
p="8"
{...props}
>
{icon && (
<div
display="flex"
alignItems="center"
justifyContent="center"
size="18"
rounded="full"
mb="4"
mx="auto"
bg={icon.bg || "secondary"}
>
<Icon size="10" color="white" {...icon} />
</div>
)}
<div flex="1">
<h4 variant="heading.h4">{heading}</h4>
{text && (
<p variant="text.paragraph text.sm" mt="1">
{text}
</p>
)}
{link}
</div>
</div>
)
}

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

Usage (JavaScript)
import { Icon } from "reflexjs"
import Block from "../src/components/cards-001"
export default function Example() {
return (
<Block
subheading="Subheading"
heading="Unlock your creativity"
text="Dicta minus iusto quisquam doloribus temporibus."
cards={[
{
heading: "Marketing Strategies",
text:
"Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
icon: {
name: "activity",
},
link: (
<a display="inline-flex" alignItems="center" href="#">
Learn more <Icon name="arrow-right" size="4" ml="2" />
</a>
),
},
{
heading: "Business Planning",
text:
"Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
icon: {
name: "credit-card",
},
link: (
<a display="inline-flex" alignItems="center" href="#">
Learn more <Icon name="arrow-right" size="4" ml="2" />
</a>
),
},
{
heading: "Premium Support",
text:
"Vestibulum ante ipsum primis in faucibus orci luctus et primis in faucibus ultrices.",
icon: {
name: "gift",
},
link: (
<a display="inline-flex" alignItems="center" href="#">
Learn more <Icon name="arrow-right" size="4" ml="2" />
</a>
),
},
]}
/>
)
}

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub