BlocksHero Block

1import * as React from "react"
2
3export default function Block({
4  subheading,
5  heading,
6  text,
7  image,
8  imagePosition = "right",
9  buttons,
10  children,
11  ...props
12}) {
13  return (
14    <section py="6|12|20" {...props}>
15      <div variant="container">
16        <div
17          display="grid"
18          gridAutoFlow="dense"
19          col="1|1|2"
20          gap="8|8|12"
21          alignItems="center"
22        >
23          {image && (
24            <img
25              colStart={`null|null|${imagePosition === "left" ? 1 : 2}`}
26              w="full"
27              rounded="lg"
28              overflow="hidden"
29              {...image}
30            />
31          )}
32          <div
33            d="flex"
34            flexDirection="column"
35            alignItems="center|flex-start"
36            textAlign="center|left"
37          >
38            {subheading && <p variant="subheading">{subheading}</p>}
39            {heading && (
40              <h1 variant="heading.h1" fontWeight="bolder" lineHeight="tight">
41                {heading}
42              </h1>
43            )}
44            {text && (
45              <p variant="text.lead" mt="2">
46                {text}
47              </p>
48            )}
49            {buttons}
50            {children}
51          </div>
52        </div>
53      </div>
54    </section>
55  )
56}

1import { Icon } from "reflexjs"
2import Block from "../src/components/hero-001"
3
4export default function Example() {
5  return (
6    <Block
7      subheading="Subheading"
8      heading="Build a better web"
9      text="Reiciendis quia totam esse. Dicta minus iusto quisquam doloribus temporibus."
10      image={{
11        src: "/images/placeholder.jpg",
12        alt: "Hero image",
13      }}
14      buttons={
15        <div display="inline-grid" col="2" gap="2" mt="4">
16          <a variant="button.primary" href="#">
17            Get started <Icon name="arrow-right" ml="2" size="4" />
18          </a>
19          <a variant="button.secondary" href="#">
20            Learn more
21          </a>
22        </div>
23      }
24    />
25  )
26}