Minimal modular footer

components/footer/README.md

@@ -0,0 +1,96 @@
+# Footer component
+
+[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-footer.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-footer)
+
+## About
+
+The footer is a component positioned at the bottom of a page that provides access to supporting navigation, brand identity, and regulatory information.
+
+## Usage
+
+### Description
+
+The footer marks the end of the page experience. It reinforces brand presence, helps users discover supporting links, and provides access to required legal and compliance information. While it complements primary navigation, it should not duplicate or replace core page content. Its structure and scale vary by context from modular configurations to simplified variations for focused experiences.
+
+### When to use this component?
+
+Use the footer when the page provides a complete experience and users may benefit from secondary navigation or supporting information.
+
+Here are some cases where the footer provides value:
+
+- The experience extends beyond a single interaction and requires familiar structural anchors.
+- Users may reach the end of the page seeking additional options or clarification.
+- Support pathways should remain available without competing with primary actions.
+- Social engagement should be accessible without interfering with the main content structure.
+- The page represents a natural end point where related links can guide next steps.
+- Regulatory or compliance requirements demand persistent access.
+- Brand identity and organisational representation standards apply.
+
+### When not to use this component?
+
+The footer should be omitted when:
+
+- Users are completing a focused workflow that benefits from minimal navigation.
+- The page exists within an embedded or constrained environment.
+- The layout requires a minimal footprint.
+- A modal, micro-interaction, or contained workflow does not represent a full-page experience.
+
+### Deciding what to use
+
+| Variant | Examples | Description |
+| --- | --- | --- |
+| [Modular](../vf-footer) | VF-footer | Use when footer sections need to be customised |
+| EMBL-EBI Corporate Variant | [EMBL_EBI header-footer](../ebi-header-footer) | Use the EMBL-EBI corporate variant for organisational or self-contained experiences |
+|  | [Minimal](../vf-minimal-footer) | Use when only essential brand and legal information is needed |
+
+### Themes
+
+The footer is available in two colour schemes: light and dark, to establish clear visual distinction from page content.
+
+Apply the light scheme when the page background uses colour or tone, and the dark scheme when the background is white or near-white. This intentional contrast ensures users can clearly identify where the main content concludes and the footer begins.
+
+### Usability and content guidance
+
+Curate your footer. Footer links should direct users to relevant content that addresses common questions or needs. While disclaimers and legal content may be necessary, aim to keep them concise and avoid unnecessary clutter.
+
+The footer does not need to mirror the header. Link organisation in the footer may differ from top-level header navigation, particularly when the header contains more extensive navigation options than the footer can accommodate.
+
+### Collaboration
+
+The collaborations section provides standardised patterns for displaying varying levels of partnerships and collaborations. The display format adapts based on the number of collaborators.
+
+### Accessibility
+
+This component targets WCAG 2.1 AA accessibility standard.
+
+- Links provide direct location description [Manual testing required]: Ensure link text is descriptive and not ambiguous. WCAG A 2.4.4 Link purpose (in context)
+- Keyboard navigation: All links and interactive elements are keyboard accessible
+- Focus indicators: Clear visual focus states meet 3:1 contrast requirements
+- Touch targets: All clickable elements meet the minimum 44x44 pixel touch target size on mobile and tablet
+- Colour contrast: Text and link colours have been tested against both light and dark backgrounds
+- Screen readers: Semantic HTML and ARIA labels ensure footer content is properly announced
+- Responsive design: Footer adapts appropriately across mobile (600px), tablet (768px) and desktop (1154px) breakpoints
+
+## Install
+
+This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `footer` with this command.
+
+```
+$ yarn add --dev @visual-framework/footer
+```
+
+### Sass/CSS
+
+The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.
+
+```
+@import "@visual-framework/footer/index.scss";
+```
+
+Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/)
+
+## Help
+
+- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/)
+- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
+- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)

components/footer/footer.config.yml

@@ -0,0 +1,9 @@
+title: Footer
+label: Footer
+preview: '@preview--nogrid'
+status: live
+context:
+  component-type: container
+  footer__url: 'JavaScript:Void(0);'
+  isExample: true
+  exampleMultiColumns: "false"

components/footer/footer.njk

@@ -0,0 +1,3 @@
+<img src="../../assets/footer/assets/modular.png" alt="Modular footer example" loading="lazy">
+<img src="../../assets/footer/assets/minimal.png" alt="Minimal footer example" loading="lazy">
+<img src="../../assets/footer/assets/embl-ebi.png" alt="EMBL-EBI footer example" loading="lazy">

components/vf-componenet-rollup/index.scss

@@ -138,6 +138,7 @@ button {
 
 @import 'vf-news-container/vf-news-container.scss';
 @import 'vf-video-container/vf-video-container.scss';
+@import 'vf-minimal-footer/vf-minimal-footer.scss';
 @import 'vf-footer/vf-footer.scss';
 
 @import 'vf-show-more/vf-show-more.scss';

components/vf-footer/CHANGELOG.md

@@ -1,3 +1,6 @@
+### 1.2.2
+
+* Layout and styling updates including inner wrapper, spacing tokens, social icons, and mobile responsiveness improvements
 ### 1.2.1
 
 * Changes to footer based on `EMBL-EBI Intranet` implementation findings [Tracking issue](https://github.com/visual-framework/vf-core/issues/1978)

components/vf-footer/README.md

@@ -4,7 +4,134 @@
 
 ## About
 
-A container for links, copyright and other common content at the bottom of webpages.
+The vf-footer is a flexible footer component that allows websites to configure different modules based on their specific needs whilst maintaining consistent branding.
+
+## Usage
+
+### Description
+
+The vf-footer provides a flexible and structured approach to footer configuration. It allows configuration of specific sections and adjustment of text content as needed, while maintaining consistent layout, accessibility compliance, and brand identity.
+
+### What does 'modular' mean?
+
+Modular in the context of the vf-footer refers to the ability to enable or disable sections and customise text within them. It does not mean you can change the order of sections. The visual sequence is fixed to maintain consistency and meet accessibility requirements. If your service requires a different section order, please contact the Visual Framework team to discuss your use case.
+
+### Configurable sections
+
+| Element | Usage | Notes |
+| --- | --- | --- |
+| Collaborations | Display partner, funder or collaborator logos | Optional |
+| Custom logo | Highlight the specific branding | Optional |
+| Mission statement | Provide context about the service or organisation | Optional |
+| Custom links | Use website specific navigation organised by category. If custom navigation is not required, it is recommended to use the Minimal footer component instead | Required |
+| Contact details | Contact details are flexible and can accommodate short or long text formats. All contact methods can be linked as needed, with the option to direct users to a dedicated contact page. | Optional |
+| Social media | Link to relevant social channels | Optional |
+| Utility | The bottom section contains links such as Terms of use, copyright and other utility links | Optional |
+
+### When to use
+
+Use the VF-Modular footer when your website requires:
+
+-   To display social media channels
+-   Service-specific navigation or utility links
+-   Needs to display its own logo and mission statement
+-   Requires a flexible footer structure that can evolve
+-   Where there is a need to show collaboration with multiple partners
+
+### When not to use
+
+The Visual Framework offers other footer variants that may better suit other use cases:
+
+-   If your site only needs basic branding, essential links, and legal information without service-specific navigation or social media, use Minimal footer instead
+-   If your site requires full EMBL-EBI institutional presence with parent navigation across all major organisational sections it is recommended to use the EMBL_EBI header-footer
+
+### Deciding what to use
+
+| Variant | Examples | Description |
+| --- | --- | --- |
+| [Modular](../vf-footer) | VF-footer | Use when footer sections need to be customised |
+| EMBL-EBI Corporate Variant | [EMBL_EBI header-footer](../ebi-header-footer) | Use the EMBL-EBI corporate variant for organisational or self-contained experiences |
+|  | [Minimal](../vf-minimal-footer) | Use when only essential brand and legal information is needed |
+
+### Collaboration section variants
+
+The collaborations section provides standardised patterns for displaying varying levels of partnerships and collaborations. The display format adapts based on the number of collaborators.
+
+The Collaborations section renders its own top green border. Remove the footer's default top margin line to prevent duplication.
+
+#### Logos display (1 - 6 partners)
+
+When you have between 1 and 6 partners, display their logos horizontally across the section.
+
+-   Uses a 6-column grid at desktop breakpoint (1154px+)
+-   One logo per column
+-   Maximum logo dimensions: 174px width and 64x height
+-   Logos centred within their column
+-   Scale down logos proportionally if they exceed maximum dimensions
+-   For best image resolution, svg usage is recommended
+
+#### Partners links in columns (1 - 9 partners)
+
+When you have between 1 and 9 partners, you need to display their names as text links.
+
+-   3-column layout on desktop
+-   Partner names displayed as clickable links
+-   Text aligned left within each column
+
+#### Categorised summary (10+ partners)
+
+When you have 10 or more partners, synthesise them into categories with summary numbers and a "See all collaborators" link.
+
+-   Optional partnership statement describing the nature of collaborations
+-   Summary categories displayed as numbers with labels (e.g., "35 Data partners", "4 Supporting funders")
+-   "See all collaborators" link that directs to a dedicated page listing all partners
+-   Placeholder text can be customisable
+
+### Choosing the right collaboration variant
+
+| Variant | Nº of partners | Usage |
+| --- | --- | --- |
+| Logo display | 1 - 6 | Provides strong visual recognition for each partner |
+| Text links in columns | 1 - 9 | Maintains readability whilst accommodating more partners |
+| Categorised summary | 10+ | Prevents footer from becoming overwhelming; directs users to dedicated page |
+
+### Terms of Use (ToU)
+
+Guidelines for domains requiring both Organisation-wide and Service-specific Terms
+
+When a domain requires both organisation-wide Terms of Use and service-specific Terms of Use, teams should create a single dedicated page that clearly presents both sets of terms together. This consolidated approach ensures users can easily understand which terms apply to their specific use case while maintaining a single, clear ToU link in the footer. This prevents confusion from multiple links with similar names and provides a better user experience.
+
+#### Cookie banner pattern
+
+Avoid including ToU in cookie banners. Terms of Use should remain permanently visible in the footer rather than in a dismissible cookie consent banner. Cookie banners are temporary and can be dismissed by users, removing access to critical legal information. By keeping ToU in the footer, users can always access this information whenever needed, regardless of their cookie consent choices.
+
+### Themes
+
+The footer is available in two colour schemes: light and dark, to establish clear visual distinction from page content.
+
+Apply the light scheme when the page background uses colour or tone, and the dark scheme when the background is white or near-white. This intentional contrast ensures users can clearly identify where the main content concludes and the footer begins.
+
+### Responsiveness
+
+The component is designed to adapt seamlessly across different screen sizes. The layout of the custom links section wraps 2 column grids on tablet (Breaking point 768px) and 1 column on mobile (breaking point 600px). Spacing, readability, and target touch size are optimised for accessibility and ease of use.
+
+### Accessibility
+
+This component targets WCAG 2.1 AA accessibility standard.
+
+-   Links provide direct location description [Manual testing required]: Ensure link text is descriptive and not ambiguous. WCAG A 2.4.4 Link purpose (in context)
+
+-   Keyboard navigation: All links and interactive elements are keyboard accessible
+
+-   Focus indicators: Clear visual focus states meet 3:1 contrast requirements
+
+-   Touch targets: All clickable elements meet the minimum 44×44 pixel touch target size on mobile and tablet
+
+-   Colour contrast: Text and link colours have been tested against both light and dark backgrounds
+
+-   Screen readers: Semantic HTML and ARIA labels ensure footer content is properly announced
+
+-   Responsive design: Footer adapts appropriately across mobile (600px), tablet (768px) and desktop (1154px) breakpoints
 
 ## Install