Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

BlocksCards Block

Cards 003
View fullscreen

How to use this block

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

Block (JavaScript)
import * as React from "react"
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, image, link, ...props }) {
return (
<div borderWidth="1" rounded="lg" p="6" {...props}>
{image && <img w="full" mb="4" rounded="md" {...image} />}
<h4 variant="heading.h4">{heading}</h4>
{text && (
<p variant="text.paragraph text.sm" mt="1">
{text}
</p>
)}
{link}
</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-003"
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.",
image: {
src: "/images/placeholder.jpg",
alt: "Image",
},
link: (
<a
display="inline-flex"
alignItems="center"
variant="text.link"
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.",
image: {
src: "/images/placeholder.jpg",
alt: "Image",
},
link: (
<a
display="inline-flex"
alignItems="center"
variant="text.link"
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.",
image: {
src: "/images/placeholder.jpg",
alt: "Image",
},
link: (
<a
display="inline-flex"
alignItems="center"
variant="text.link"
href="#"
>
Learn more <Icon name="arrow-right" size="4" ml="2" />
</a>
),
},
]}
/>
)
}

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub