# Footer Footer provides access to secondary navigation, organizational information, legal links, contact details, and related resources. It serves as the concluding navigation area of a website. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--introduction ## Variants documented in Storybook - Footer Type 1 to 6: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--footer-type-1-to-6 - Footer Variant (Dark & Primary): https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--footer-variant-dark-primary - Need Support: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--need-support - Bottom Strip: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--bottom-strip ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Footer. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Bottom Strip — Type-1: Full Width by Default HTML: ```html

© 2022 - Copyright UX4G. All rights reserved. Powered by NeGD | MeitY Government of India®2022 UX4G

English Feedback FAQs Privacy policy
``` React: ```jsx import React from 'react'; const FooterExample1Demo = () => ( <> {/* Variant: Bottom Strip Type 1 */}

© 2022 - Copyright UX4G. All rights reserved. Powered by NeGD | MeitY Government of India®2022 UX4G

English Feedback FAQs Privacy policy
); export default FooterExample1Demo; ``` Angular: ```html

© 2022 - Copyright UX4G. All rights reserved. Powered by NeGD | MeitY Government of India®2022 UX4G

English Feedback FAQs Privacy policy
``` ### 2. Bottom Strip — Type-2: Full Width in Center HTML: ```html
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` React: ```jsx import React from 'react'; const FooterExample2Demo = () => ( <> {/* Variant: Bottom Strip Type 2 */}
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
); export default FooterExample2Demo; ``` Angular: ```html
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` ### 3. Bottom Strip — Type-3: Full Width in Logo HTML: ```html
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` React: ```jsx import React from 'react'; const FooterExample3Demo = () => ( <> {/* Variant: Bottom Strip Type 3 */}
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
); export default FooterExample3Demo; ``` Angular: ```html
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` ### 4. Bottom Strip — Type-4: Full Width in Logo with Social Icons HTML: ```html
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` React: ```jsx import React from 'react'; const FooterExample4Demo = () => ( <> {/* Variant: Bottom Strip Type 4 */}
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
); export default FooterExample4Demo; ``` Angular: ```html
Title
English Feedback FAQs Terms & Conditions Privacy policy Contact Us
``` ### 5. Footer Type — Footer Type 1 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample5Demo = () => ( <> {/* Variant: Footer Type 1 */} ); export default FooterExample5Demo; ``` Angular: ```html ``` ### 6. Footer Type — Footer Type 2 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample6Demo = () => ( <> {/* Variant: Footer Type 2 */} ); export default FooterExample6Demo; ``` Angular: ```html ``` ### 7. Footer Type — Footer Type 3 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample7Demo = () => ( <> {/* Variant: Footer Type 3 */} ); export default FooterExample7Demo; ``` Angular: ```html ``` ### 8. Footer Type — Footer Type 4 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample8Demo = () => ( <> {/* Variant: Footer Type 4 */} ); export default FooterExample8Demo; ``` Angular: ```html ``` ### 9. Footer Type — Footer Type 5 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample9Demo = () => ( <> {/* Variant: Footer Type 5 */} ); export default FooterExample9Demo; ``` Angular: ```html ``` ### 10. Footer Type — Footer Type 6 HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample10Demo = () => ( <> {/* Variant: Footer Type 6 */} ); export default FooterExample10Demo; ``` Angular: ```html ``` ### 11. Footer Variant — Footer Dark HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample11Demo = () => ( <> {/* Variant: Footer Dark */} ); export default FooterExample11Demo; ``` Angular: ```html ``` ### 12. Footer Variant — Footer Primary HTML: ```html ``` React: ```jsx import React from 'react'; const FooterExample12Demo = () => ( <> {/* Variant: Footer Primary */} ); export default FooterExample12Demo; ``` Angular: ```html ``` ### 13. Introduction — Introduction HTML: ```html
Components

Footer

Footer provides access to secondary navigation, organizational information, legal links, contact details, and related resources. It serves as the concluding navigation area of a website.

Implementation Showcase

Visual demonstration of Footer variations.

Footer Default

Footer Brand (Primary)

Footer Dark

CSS Class Reference

Quickly copy layout and utility classes for Footers.

Structural Classes

Base Footer Container ux4g-footer
Content Wrapper ux4g-footer-wrapper
Department Info Wrapper ux4g-dept-wrapper
Responsive Department Header ux4g-f-dept-responsive
Footer Links Section ux4g-f-links
Footer Link List Container ux4g-f-link-list
4-Column Footer Links Grid ux4g-f-links-cols-4
1-Column Footer Links Grid ux4g-f-links-cols-1

Theme Variants

Dark Theme Modifier ux4g-footer-dark
Primary Brand Theme Modifier ux4g-footer-primary

Need Support Variants

Need Support Type 1 (Full Width Justify Between) ux4g-ns-t1
Need Support Type 2 (Left Aligned) ux4g-ns-t2
Need Support Type 3 (Center Aligned) ux4g-ns-t3
Need Support Type 4 (Brand Background) ux4g-ns-t4

Bottom Strip Variants

Bottom Strip Type 1 (Full Width by Default) ux4g-fbs-t1
Bottom Strip Type 2 (Full Width in Center) ux4g-fbs-t2
Bottom Strip Type 3 (Full Width in Logo) ux4g-fbs-t3
Bottom Strip Type 4 (Full Width in Logo with Social Icons) ux4g-fbs-t4
Bottom Strip Links Wrapper ux4g-fbs-links
Bottom Strip Social Icons List ux4g-fbs-social-list
Bottom Strip Logo Wrapper ux4g-fbs-logo-wrapper
``` React: ```jsx import React from 'react'; const FooterExample13Demo = () => ( <>
Components

Footer

Footer provides access to secondary navigation, organizational information, legal links, contact details, and related resources. It serves as the concluding navigation area of a website.

Implementation Showcase

Visual demonstration of Footer variations.

Footer Default

Footer Brand (Primary)

Footer Dark

CSS Class Reference

Quickly copy layout and utility classes for Footers.

Structural Classes

Base Footer Container ux4g-footer
Content Wrapper ux4g-footer-wrapper
Department Info Wrapper ux4g-dept-wrapper
Responsive Department Header ux4g-f-dept-responsive
Footer Links Section ux4g-f-links
Footer Link List Container ux4g-f-link-list
4-Column Footer Links Grid ux4g-f-links-cols-4
1-Column Footer Links Grid ux4g-f-links-cols-1

Theme Variants

Dark Theme Modifier ux4g-footer-dark
Primary Brand Theme Modifier ux4g-footer-primary

Need Support Variants

Need Support Type 1 (Full Width Justify Between) ux4g-ns-t1
Need Support Type 2 (Left Aligned) ux4g-ns-t2
Need Support Type 3 (Center Aligned) ux4g-ns-t3
Need Support Type 4 (Brand Background) ux4g-ns-t4

Bottom Strip Variants

Bottom Strip Type 1 (Full Width by Default) ux4g-fbs-t1
Bottom Strip Type 2 (Full Width in Center) ux4g-fbs-t2
Bottom Strip Type 3 (Full Width in Logo) ux4g-fbs-t3
Bottom Strip Type 4 (Full Width in Logo with Social Icons) ux4g-fbs-t4
Bottom Strip Links Wrapper ux4g-fbs-links
Bottom Strip Social Icons List ux4g-fbs-social-list
Bottom Strip Logo Wrapper ux4g-fbs-logo-wrapper
); export default FooterExample13Demo; ``` Angular: ```html
Components

Footer

Footer provides access to secondary navigation, organizational information, legal links, contact details, and related resources. It serves as the concluding navigation area of a website.

Implementation Showcase

Visual demonstration of Footer variations.

Footer Default

Footer Brand (Primary)

Footer Dark

CSS Class Reference

Quickly copy layout and utility classes for Footers.

Structural Classes

Base Footer Container ux4g-footer
Content Wrapper ux4g-footer-wrapper
Department Info Wrapper ux4g-dept-wrapper
Responsive Department Header ux4g-f-dept-responsive
Footer Links Section ux4g-f-links
Footer Link List Container ux4g-f-link-list
4-Column Footer Links Grid ux4g-f-links-cols-4
1-Column Footer Links Grid ux4g-f-links-cols-1

Theme Variants

Dark Theme Modifier ux4g-footer-dark
Primary Brand Theme Modifier ux4g-footer-primary

Need Support Variants

Need Support Type 1 (Full Width Justify Between) ux4g-ns-t1
Need Support Type 2 (Left Aligned) ux4g-ns-t2
Need Support Type 3 (Center Aligned) ux4g-ns-t3
Need Support Type 4 (Brand Background) ux4g-ns-t4

Bottom Strip Variants

Bottom Strip Type 1 (Full Width by Default) ux4g-fbs-t1
Bottom Strip Type 2 (Full Width in Center) ux4g-fbs-t2
Bottom Strip Type 3 (Full Width in Logo) ux4g-fbs-t3
Bottom Strip Type 4 (Full Width in Logo with Social Icons) ux4g-fbs-t4
Bottom Strip Links Wrapper ux4g-fbs-links
Bottom Strip Social Icons List ux4g-fbs-social-list
Bottom Strip Logo Wrapper ux4g-fbs-logo-wrapper
``` ### 14. Need Support — Type-1: Full Width (Justify Between) HTML: ```html

Need Support?

Reach out to us and we will get back to you.

``` React: ```jsx import React from 'react'; const FooterExample14Demo = () => ( <> {/* Variant: Need Support Type 1 */}

Need Support?

Reach out to us and we will get back to you.

); export default FooterExample14Demo; ``` Angular: ```html

Need Support?

Reach out to us and we will get back to you.

``` ### 15. Need Support — Type-2: Left Aligned HTML: ```html

Need Support?

Reach out to us and we will get back to you.

``` React: ```jsx import React from 'react'; const FooterExample15Demo = () => ( <> {/* Variant: Need Support Type 2 */}

Need Support?

Reach out to us and we will get back to you.

); export default FooterExample15Demo; ``` Angular: ```html

Need Support?

Reach out to us and we will get back to you.

``` ### 16. Need Support — Type-3: Center Aligned HTML: ```html

Need Support?

Reach out to us and we will get back to you.

``` React: ```jsx import React from 'react'; const FooterExample16Demo = () => ( <> {/* Variant: Need Support Type 3 */}

Need Support?

Reach out to us and we will get back to you.

); export default FooterExample16Demo; ``` Angular: ```html

Need Support?

Reach out to us and we will get back to you.

``` ### 17. Need Support — Type-4: Brand Background HTML: ```html

Need Support?

Reach out to us and we will get back to you.

``` React: ```jsx import React from 'react'; const FooterExample17Demo = () => ( <> {/* Variant: Need Support Type 4 */}

Need Support?

Reach out to us and we will get back to you.

); export default FooterExample17Demo; ``` Angular: ```html

Need Support?

Reach out to us and we will get back to you.

``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.