Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

BlocksCall To Action Block

Call to action 003
View fullscreen

How to use this block

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

Block (JavaScript)
import * as React from "react"
export default function Block({
subheading,
heading,
text,
buttons,
...props
}) {
return (
<section py="6|8|12|20" {...props}>
<div variant="container">
<div
display="flex"
flexDirection="column|row"
justifyContent="space-between"
alignItems="flex-start|center"
>
<div flex="1">
{subheading && (
<p color="primary" textTransform="uppercase" m="0">
{subheading}
</p>
)}
{heading && (
<h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
{heading}
</h1>
)}
{text && (
<p variant="text.lead" mt="2">
{text}
</p>
)}
</div>
{buttons}
</div>
</div>
</section>
)
}

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

Usage (JavaScript)
import * as React from "react"
import { Icon } from "reflexjs"
import Block from "../src/components/call-to-action-003"
export default function Example() {
return (
<Block
subheading="Subheading"
heading="Start building today"
text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
buttons={
<a variant="button.accent.lg" href="#" mt="6">
Get started <Icon name="arrow-right" ml="2" size="4" />
</a>
}
/>
)
}

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub