Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksHero Block

Hero 002
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2
3export default function Block({
4 subheading,
5 heading,
6 text,
7 image,
8 buttons,
9 children,
10 ...props
11}) {
12 return (
13 <section pt="6|8|12|20" {...props}>
14 <div variant="container">
15 <div
16 display="flex"
17 flexDirection="column"
18 textAlign="center"
19 justifyContent="center"
20 >
21 {subheading && (
22 <p color="primary" textTransform="uppercase" m="0">
23 {subheading}
24 </p>
25 )}
26 {heading && (
27 <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
28 {heading}
29 </h1>
30 )}
31 {text && (
32 <p variant="text.lead" mt="2">
33 {text}
34 </p>
35 )}
36 {buttons}
37 {children}
38 </div>
39 {image && (
40 <img
41 display="block"
42 w="full"
43 h="40|56|80"
44 mt="12|14|16"
45 roundedTop="xl"
46 overflow="hidden"
47 {...image}
48 />
49 )}
50 </div>
51 </section>
52 )
53}

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/hero-002"
4
5export default function Example() {
6 return (
7 <Block
8 subheading="Subheading"
9 heading="Build something amazing"
10 text="Dicta minus iusto quisquam doloribus temporibus."
11 image={{
12 src: "/images/placeholder.jpg",
13 alt: "Hero image",
14 }}
15 buttons={
16 <div display="flex" justifyContent="center" gap="4" mt="6">
17 <a variant="button.primary.lg" href="#">
18 Get started <Icon name="arrow-right" ml="2" size="4" />
19 </a>
20 <a variant="button.secondary.lg" href="#">
21 Learn more
22 </a>
23 </div>
24 }
25 />
26 )
27}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter