Blocks Call To Action Block
Call to action 003How 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"23export default function Block({4 subheading,5 heading,6 text,7 buttons,8 ...props9}) {10 return (11 <section py="6|8|12|20" {...props}>12 <div variant="container">13 <div14 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"45export default function Example() {6 return (7 <Block8 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}