The HelperText is a useful component to show a not important text or a helper text. It's a simple component that allows you to show a text with a small font size and a lower opacity.
To start using the footer component you need to import it from pol-ui:
import { Footer } from "pol-ui";Default Footer
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="flex w-full justify-between p-6">
<Copyright href="#" by="Pol-ui" year={thisYear} />
<FooterLinkGroup>
<Link href="#">About</Link>
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Contact</Link>
<Button size="sm">Get Started</Button>
</FooterLinkGroup>
</div>
</Footer>
);
};
export default FooterComponent;Props
Footer
| Prop name | Type | Default | Description |
|---|---|---|---|
| container | boolean | false | If true, the footer will be wrapped in a container |
| theme | object | Custom theme for the footer | |
| className | string | "" | Custom class for the footer |
| children | node | null | The content of the footer |
💡
You can also provide any prop comming from the HTML footer tag.
FooterBrand
| Prop name | Type | Default | Description |
|---|---|---|---|
| alt | string | "" | The alt text for the image |
| className | string | "" | Custom class for the brand |
| href | string | "" | The link for the brand |
| name | string | "" | The name of the brand |
| src | string | "" | The source of the image |
| theme | object | Custom theme for the brand |
💡
You can also provide any prop comming from the HTML anchor tag and the HTML image tag. If your brand has a href prop, the brand will be rendered as an anchor.
FooterLinkGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| col | boolean | false | If true, the group will be rendered as a column |
| theme | object | Custom theme for the group | |
| titleAs | string | "h2" | The tag for the title |
| title | string | "" | The title of the group |
| titleClassname | string | "" | Custom class for the title |
| className | string | "" | Custom class for the group |
| children | node | null | The content of the group |
💡
You can also provide any prop comming from the HTML ul tag.
Examples
Footer with a brand
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full p-6 text-center">
<div className="w-full justify-between sm:flex sm:items-center sm:justify-between">
<FooterBrand
href="https://ui.polgubau.com"
src="https://ui.polgubau.com/logo.png"
alt="Pol-ui Logo"
/>
<FooterLinkGroup>
<Link href="#">About</Link>
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Contact</Link>
</FooterLinkGroup>
</div>
<Divider />
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
</div>
</Footer>
);
};
export default FooterComponent;Footer with social media links
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full p-6">
<div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
<div>
<FooterBrand
href="https://ui.polgubau.com"
src="https://ui.polgubau.com/logo.png"
alt="Pol-ui Logo"
/>
</div>
<div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
<div>
<FooterLinkGroup col title="about">
<Link href="#">Pol-ui</Link>
<Link href="#">Tailwind CSS</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="Follow us">
<Link href="#">Github</Link>
<Link href="#">Discord</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="Legal">
<Link href="#">Privacy Policy</Link>
<Link href="#">Terms & Conditions</Link>
</FooterLinkGroup>
</div>
</div>
</div>
<Divider />
<div className="w-full sm:flex sm:items-center sm:justify-between">
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
<div className="mt-4 flex space-x-2 sm:mt-0 sm:justify-center">
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
<IconButton href="#">
<BsInstagram size={20} />
</IconButton>
<IconButton href="#">
<BsGithub size={20} />
</IconButton>
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
</div>
</div>
</div>
</Footer>
);
};
export default FooterComponent;Footer with a sitemap
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full bg-gray-800 dark">
<div className="grid w-full grid-cols-2 gap-8 px-6 py-8 md:grid-cols-4">
<div>
<FooterLinkGroup col title="Company">
<Link href="#">About</Link>
<Link href="#">Careers</Link>
<Link href="#">Brand Center</Link>
<Link href="#">Blog</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="help center">
<Link href="#">Discord Server</Link>
<Link href="#">Twitter</Link>
<Link href="#">Facebook</Link>
<Link href="#">Contact Us</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="legal">
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Terms & Conditions</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="download">
<Link href="#">iOS</Link>
<Link href="#">Android</Link>
<Link href="#">Windows</Link>
<Link href="#">MacOS</Link>
</FooterLinkGroup>
</div>
</div>
<div className="w-full bg-gray-700 px-4 py-6 sm:flex sm:items-center sm:justify-between sm:px-10">
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
<div className="mt-4 flex space-x-2 sm:mt-0 sm:justify-center">
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
<IconButton href="#">
<BsInstagram size={20} />
</IconButton>
<IconButton href="#">
<BsGithub size={20} />
</IconButton>
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
</div>
</div>
</div>
</Footer>
);
};
export default FooterComponent;Theme
interface HelperTextTheme {
root: {
base: string;
colors: ColorsType;
};
}