Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksCall To Action Block

Call to action 001
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2
3export default function Block({
4 subheading,
5 heading,
6 text,
7 buttons,
8 ...props
9}) {
10 return (
11 <section py="6|8|12|20" {...props}>
12 <div variant="container">
13 {subheading && (
14 <p color="primary" textTransform="uppercase" m="0">
15 {subheading}
16 </p>
17 )}
18 {heading && (
19 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
20 {heading}
21 </h1>
22 )}
23 {text && (
24 <p variant="text.lead" mt="2">
25 {text}
26 </p>
27 )}
28 {buttons}
29 </div>
30 </section>
31 )
32}

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

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

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter