Reflexjs
DocumentationBlocks LibraryGitHubTwitter
v1.0.1

BlocksFooter Block

Footer 001
View fullscreen

How to use this block

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

Block (JavaScript)
1import * as React from "react"
2import { Icon, VisuallyHidden } from "reflexjs"
3
4export default function Block({ name, copyright, links, iconLinks, ...props }) {
5 return (
6 <section py={[8, 10, 12]} {...props}>
7 <div variant="container">
8 <div
9 display="flex"
10 alignItems="center"
11 flexDirection="column|row"
12 justifyContent="space-between"
13 >
14 {name && <h2 variant="heading.h2">{name}</h2>}
15 {links?.length && (
16 <div
17 display="grid"
18 col={`1|repeat(${links.length}, auto)`}
19 gap="4|4|8"
20 mt="4|4|0"
21 >
22 {links.map((link, index) => (
23 <a
24 key={index}
25 variant="text"
26 href={link.href}
27 textAlign="center"
28 _hover={{
29 color: "primary",
30 }}
31 >
32 {link.title}
33 </a>
34 ))}
35 </div>
36 )}
37 {iconLinks?.length && (
38 <div display="grid" col="2" gap="4" mt="4|0">
39 {iconLinks.map((iconLink, index) => (
40 <a key={index} href={iconLink.href} color="text">
41 <Icon name={iconLink.name} size={5} />
42 <VisuallyHidden>{iconLink.title}</VisuallyHidden>
43 </a>
44 ))}
45 </div>
46 )}
47 </div>
48 {copyright && (
49 <div borderTopWidth={1} textAlign="center" pt="4|5|6" mt="4|5|6">
50 <p variant="text.sm" my="0">
51 {copyright}
52 </p>
53 </div>
54 )}
55 </div>
56 </section>
57 )
58}

2. Copy the example code below and add it to your page.

Usage (JavaScript)
1import * as React from "react"
2import Block from "../src/components/footer-001"
3
4export default function Example() {
5 return (
6 <Block
7 name="Reflex"
8 links={[
9 {
10 title: "Features",
11 href: "#",
12 },
13 {
14 title: "Pricing",
15 href: "#",
16 },
17 {
18 title: "Learn",
19 href: "#",
20 },
21 {
22 title: "Support",
23 href: "#",
24 },
25 {
26 title: "Contact Us",
27 href: "#",
28 },
29 ]}
30 iconLinks={[
31 {
32 title: "Follow on Twitter",
33 href: "#",
34 name: "twitter",
35 },
36 {
37 title: "Follow on Instagram",
38 href: "#",
39 name: "instagram",
40 },
41 ]}
42 copyright={`Copyright © ${new Date().getFullYear()} Reflex Inc. All rights reserved.`}
43 />
44 )
45}

© 2021 Reflexjs

DocumentationBlocks LibraryGitHubTwitter