Reflexjs
DocumentationBlocks LibraryGuidesGitHub
v1.0.1

BlocksFooter Block

Footer 002
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { Icon, VisuallyHidden } from "reflexjs"
3
4export default function Block({
5 name,
6 copyright,
7 links,
8 iconLinks,
9 children,
10 ...props
11}) {
12 return (
13 <section py={[8, 10, 12]} {...props}>
14 <div variant="container">
15 <div
16 display="flex"
17 alignItems="center"
18 flexDirection="column|row"
19 justifyContent="space-between"
20 >
21 <div maxW="none|300">
22 {name && <h2 variant="heading.h2">{name}</h2>} {children}
23 </div>
24 {links?.length && (
25 <div
26 display="grid"
27 col={`2|repeat(${links.length}, auto)`}
28 gap="4|8|16|20"
29 mt="4|4|0"
30 w="full|auto"
31 >
32 {links.map((link, index) => (
33 <div
34 key={index}
35 display="flex"
36 flexDirection="column"
37 alignItems="flex-start"
38 >
39 <a
40 href={link.href}
41 textAlign="center"
42 variant="heading.h5"
43 _hover={{
44 color: "primary",
45 }}
46 >
47 {link.title}
48 </a>
49 {link.items.map((item, index) => (
50 <a
51 key={index}
52 href={item.href}
53 variant="text"
54 display="flex"
55 mt="2"
56 >
57 {item.title}
58 </a>
59 ))}
60 </div>
61 ))}
62 </div>
63 )}
64 </div>
65 {copyright && (
66 <div
67 display="flex"
68 alignItems="center"
69 justifyContent="space-between"
70 borderTopWidth={1}
71 textAlign="center"
72 pt="4|5|6"
73 mt="4|5|6"
74 >
75 <p variant="text.sm" my="0">
76 {copyright}
77 </p>
78 {iconLinks?.length && (
79 <div display="grid" col="2" gap="4" mt="4|0">
80 {iconLinks.map((iconLink, index) => (
81 <a key={index} href={iconLink.href} color="text">
82 <Icon name={iconLink.name} size={5} />
83 <VisuallyHidden>{iconLink.title}</VisuallyHidden>
84 </a>
85 ))}
86 </div>
87 )}
88 </div>
89 )}
90 </div>
91 </section>
92 )
93}

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/footer-002"
4
5export default function Example() {
6 return (
7 <Block
8 name="Reflex"
9 links={[
10 {
11 title: "Features",
12 href: "#",
13 items: [
14 {
15 title: "For developers",
16 href: "#",
17 },
18 {
19 title: "For marketers",
20 href: "#",
21 },
22 ],
23 },
24 {
25 title: "Pricing",
26 href: "#",
27 items: [
28 {
29 title: "Basic",
30 href: "#",
31 },
32 {
33 title: "Professional",
34 href: "#",
35 },
36 {
37 title: "Business",
38 href: "#",
39 },
40 ],
41 },
42 {
43 title: "Learn",
44 href: "#",
45 items: [
46 {
47 title: "Docs",
48 href: "#",
49 },
50 {
51 title: "GitHub",
52 href: "#",
53 },
54 ],
55 },
56 {
57 title: "Support",
58 href: "#",
59 items: [
60 {
61 title: "Forum",
62 href: "#",
63 },
64 {
65 title: "Discord",
66 href: "#",
67 },
68 ],
69 },
70 ]}
71 iconLinks={[
72 {
73 title: "Follow on Twitter",
74 href: "#",
75 name: "twitter",
76 },
77 {
78 title: "Follow on Instagram",
79 href: "#",
80 name: "instagram",
81 },
82 ]}
83 copyright={`Copyright © ${new Date().getFullYear()} Reflex Inc. All rights reserved.`}
84 >
85 <p variant="text" my="4">
86 Perspiciatis doloribus dignissimos delectus exercitationem ipsum
87 voluptates.
88 </p>
89 <a
90 href="mailto:#"
91 variant="text"
92 display="inline-flex"
93 alignItems="center"
94 _hover={{
95 color: "primary",
96 }}
97 >
98 <Icon name="mail" size="6" mr="2" /> hey@reflexjs.org
99 </a>
100 </Block>
101 )
102}

© 2021 Reflexjs

DocumentationBlocks LibraryGuidesGitHub