Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

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)
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 <div
14 display="flex"
15 flexDirection="column|row"
16 justifyContent="space-between"
17 alignItems="flex-start|center"
18 >
19 <div flex="1">
20 {subheading && (
21 <p color="primary" textTransform="uppercase" m="0">
22 {subheading}
23 </p>
24 )}
25 {heading && (
26 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
27 {heading}
28 </h1>
29 )}
30 {text && (
31 <p variant="text.lead" mt="2">
32 {text}
33 </p>
34 )}
35 </div>
36 {buttons}
37 </div>
38 </div>
39 </section>
40 )
41}

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-003"
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 LibraryGuidesGitHub