Footers are typically placed at the bottom of a web page or application screen, serving as a container for various types of information, links, or actions related to the content or functionality of the page.
import React from "react";
import { Button, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
alignItems: "center",
display: "flex",
flexDirection: screens.md ? "row" : "column",
gap: token.marginLG,
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
backgroundColor: token.colorBgContainer,
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.sizeXXL}px 0px`
},
nav: {
alignItems: "center",
marginLeft: screens.md ? `-${token.margin}px` : 0
},
text: {
color: token.colorTextSecondary,
textAlign: screens.md ? "right" : "center"
}
};
return (
<footer style={styles.footer}>
<div style={styles.container}>
<Space
style={styles.nav}
direction={screens.md ? "horizontal" : "vertical"}
size={screens.md ? 0 : "small"}
>
<Button type="text" href="#">
About
</Button>
<Button type="text" href="#">
Pricing
</Button>
<Button type="text" href="#">
Help
</Button>
<Button type="text" href="#">
Terms & Conditions
</Button>
</Space>
<Text style={styles.text}>
© {new Date().getFullYear()} Company Name. All Rights Reserved.
</Text>
</div>
</footer>
);
}
import React from "react";
import { Button, Grid, Space, theme, Typography } from "antd";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
container: {
alignItems: "center",
display: "flex",
flexDirection: screens.md ? "row" : "column",
gap: token.marginLG,
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`,
position: "relative"
},
footer: {
backgroundColor: token.colorBgContainer,
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.sizeXXL}px 0px`
},
nav: {
alignItems: "center",
left: screens.md ? "50%" : "0",
position: screens.md ? "absolute" : "static",
top: screens.md ? "50%" : "0",
transform: screens.md ? "translate(-50%, -50%)" : "none"
},
text: {
color: token.colorTextSecondary,
textAlign: screens.md ? "right" : "center"
}
};
return (
<footer style={styles.footer}>
<div style={styles.container}>
<a href="#">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="24" fill="#1890FF" />
<path
d="M14.4001 3.6001H20.4001V9.6001H14.4001V3.6001Z"
fill="white"
/>
<path
d="M9.6001 9.6001L14.4001 9.6001L14.4001 14.4001H9.6001V9.6001Z"
fill="white"
/>
<path
d="M3.6001 13.2001H10.8001V20.4001H3.6001V13.2001Z"
fill="white"
/>
</svg>
</a>
<Space
style={styles.nav}
direction={screens.md ? "horizontal" : "vertical"}
size={screens.md ? 0 : "small"}
>
<Button type="text">About</Button>
<Button type="text">Pricing</Button>
<Button type="text">Help</Button>
<Button type="text">Terms & Conditions</Button>
</Space>
<Text style={styles.text}>
© {new Date().getFullYear()} Company Name
</Text>
</div>
</footer>
);
}
import React from "react";
import { Button, Grid, Space, theme, Typography } from "antd";
import { FacebookFilled, InstagramFilled, LinkedinFilled, TwitterOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
button: {
color: token.colorTextSecondary
},
container: {
alignItems: "center",
display: "flex",
flexDirection: screens.md ? "row" : "column",
gap: token.size,
justifyContent: "space-between",
margin: "0 auto",
maxWidth: token.screenXL,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
backgroundColor: token.colorBgContainer,
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.paddingLG}px 0px`
},
text: {
color: token.colorTextSecondary,
textAlign: screens.md ? "left" : "center"
}
};
return (
<div style={styles.footer}>
<div style={styles.container}>
<Text style={styles.text}>
© {new Date().getFullYear()} Company Name. All Rights Reserved.
</Text>
<Space size={0}>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<FacebookFilled />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<TwitterOutlined />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<InstagramFilled />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<LinkedinFilled />}
></Button>
</Space>
</div>
</div>
);
}
import React from "react";
import { Button, Col, Grid, List, Row, Space, theme, Typography } from "antd";
import { FacebookFilled, InstagramFilled, LinkedinFilled, TwitterOutlined } from "@ant-design/icons";
const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text, Link } = Typography;
const footerLinks = [
{
title: "Company",
id: "company",
links: [
{
name: "Home",
id: "home",
url: "./"
},
{
name: "About Us",
id: "about_us",
url: "/about-us"
},
{
name: "Careers",
id: "careers",
url: "/careers"
},
{
name: "Contact Us",
id: "contact_us",
url: "/contact-us"
},
{
name: "Blog",
id: "blog",
url: "/blog"
}
]
},
{
title: "Support",
id: "support",
links: [
{
name: "Help Center",
id: "help_center",
url: "/help-center"
},
{
name: "FAQs",
id: "faqs",
url: "/faqs"
},
{
name: "Terms & Conditions",
id: "terms_conditions",
url: "/terms-conditions"
},
{
name: "Privacy Policy",
id: "privacy_policy",
url: "/privacy-policy"
}
]
},
{
title: "Services",
id: "services",
links: [
{
name: "Pricing",
id: "pricing",
url: "/pricing"
},
{
name: "Features",
id: "features",
url: "/features"
},
{
name: "Integrations",
id: "integrations",
url: "/integrations"
},
{
name: "Testimonials",
id: "testimonials",
url: "/testimonials"
}
]
},
{
title: "Resources",
id: "resources",
links: [
{
name: "Documentation",
id: "documentation",
url: "/documentation"
},
{
name: "API Reference",
id: "api_reference",
url: "/api-reference"
},
{
name: "Guides",
id: "guides",
url: "/guides"
},
{
name: "Tutorials",
id: "tutorials",
url: "/tutorials"
}
]
}
];
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
token.colorLink = token.colorTextSecondary;
token.colorLinkHover = token.colorPrimary;
const styles = {
button: {
color: token.colorTextSecondary
},
columnTitle: {
display: "block",
marginBottom: token.marginLG
},
container: {
margin: "0 auto",
maxWidth: screens.lg ? token.screenXL : token.screenSM,
padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
},
footer: {
backgroundColor: token.colorBgContainer,
borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
padding: `${token.sizeXXL}px 0px`
},
footerLegal: {
alignItems: "center",
display: "flex",
flexDirection: screens.md ? "row" : "column",
gap: token.size,
justifyContent: "space-between",
marginTop: token.marginXXL
},
link: {
color: token.colorTextSecondary
},
listItem: {
border: "0",
marginBottom: token.marginSM,
padding: "0px"
},
textLegal: {
color: token.colorTextSecondary,
textAlign: screens.md ? "left" : "center"
}
};
return (
<div style={styles.footer}>
<div style={styles.container}>
<Row
gutter={[
{
xs: token.size,
sm: token.size,
md: token.sizeLG,
lg: token.sizeLG,
xl: token.sizeLG
},
token.sizeLG
]}
>
{footerLinks.map((item) => (
<Col key={item.id} xs={24} sm={12} md={12} lg={6} xl={6}>
<div>
<Text strong style={styles.columnTitle}>
{item.title}
</Text>
<List split={false}>
{item.links.map((link) => (
<List.Item style={styles.listItem} key={link.id}>
<Link style={styles.link} href={link.url}>{link.name}</Link>
</List.Item>
))}
</List>
</div>
</Col>
))}
</Row>
<div style={styles.footerLegal}>
<Text style={styles.textLegal}>
© {new Date().getFullYear()} Company Name. All Rights Reserved.
</Text>
<Space size={0}>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<FacebookFilled />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<TwitterOutlined />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<InstagramFilled />}
></Button>
<Button
style={styles.button}
size="large"
type="text"
href="#"
icon={<LinkedinFilled />}
></Button>
</Space>
</div>
</div>
</div>
);
}
