@bolttech/atoms-footer v0.18.2
FooterCtas Component
A React component to display a footer section with call-to-action buttons.
Installation
Use the package manager npm or yarn to install the component.
npm install @bolttech/frontend-foundations @bolttech/atoms-footer
or
yarn add @bolttech/frontend-foundations @bolttech/atoms-footer
Props
The FooterCtas
component accepts the following properties:
Prop | Type | Description |
---|---|---|
copyRightInfo | string | The copyright information for the footer. |
imgLogo | string or element | An image URL or an element to be displayed as the footer logo. |
labelLogo | string | The label text for the footer logo. |
labelLinks | array | An array of objects containing label and link properties. |
dataTestId | string | The data-testid attribute for testing. |
Usage
import React from 'react';
import {FooterCtas} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
const ExampleComponent = () => {
const labelLinks = [
{label: 'Home', link: '/'},
{label: 'About', link: '/about'},
{label: 'Contact', link: '/contact'},
];
return (
<BolttechThemeProvider theme={bolttechTheme}>
<FooterCtas
copyRightInfo="© 2023 Your Company. All Rights Reserved."
imgLogo="https://example.com/logo.png"
labelLogo="Your Company"
labelLinks={labelLinks}
dataTestId="custom-footer"
/>
</BolttechThemeProvider>
);
};
export default ExampleComponent;
FooterStack Component
A React component to display a stacked footer section with informational content.
Installation
Use the package manager npm or yarn to install the component.
npm install @bolttech/frontend-foundations @bolttech/atoms-footer
or
yarn add @bolttech/frontend-foundations @bolttech/atoms-footer
Props
The FooterStack
component accepts the following properties:
Prop | Type | Description |
---|---|---|
copyRightInfo | string | The copyright information for the footer. |
imgLogo | string or element | An image URL or an element to be displayed as the footer logo. |
labelLogo | string | The label text for the footer logo. |
oicInfo | object | An object containing label and value properties. |
dbdInfo | object | An object containing label and value properties. |
securityCompliances | object | An object containing label and imgLogo properties. |
dataTestId | string | The data-testid attribute for testing. |
Usage
import React from 'react';
import {FooterStack} from '@bolttech/atoms-footer';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";
const ExampleComponent = () => {
const oicInfo = {
label: 'OIC Info',
value: 'Some value related to OIC',
};
const dbdInfo = {
label: 'DBD Info',
value: 'Some value related to DBD',
};
const securityCompliances = {
label: 'Security Compliances',
imgLogo: 'https://example.com/security-logo.png',
imgLogo2: 'https://example.com/security-logo2.png',
imgLogo3: 'https://example.com/security-logo3.png',
};
return (
<BolttechThemeProvider theme={bolttechTheme}>
<FooterStack
copyRightInfo="© 2023 Your Company. All Rights Reserved."
imgLogo="https://example.com/logo.png"
labelLogo="Your Company"
oicInfo={oicInfo}
dbdInfo={dbdInfo}
securityCompliances={securityCompliances}
dataTestId="custom-footer-stack"
/>
</BolttechThemeProvider>
);
};
export default ExampleComponent;
4 months ago
4 months ago
4 months ago
6 months ago
8 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago