diff --git a/packages/web-react/src/components/Footer/Footer.tsx b/packages/web-react/src/components/Footer/Footer.tsx
index 8a2555b560..83bb395649 100644
--- a/packages/web-react/src/components/Footer/Footer.tsx
+++ b/packages/web-react/src/components/Footer/Footer.tsx
@@ -2,16 +2,25 @@
 
 import classNames from 'classnames';
 import React from 'react';
+import { BackgroundColors } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritFooterProps } from '../../types';
+import { useFooterStyleProps } from './useFooterStyleProps';
 
-const Footer = (props: SpiritFooterProps): JSX.Element => {
-  const { children, ...restProps } = props;
+const defaultStyleProps: Partial<SpiritFooterProps> = {
+  backgroundColor: BackgroundColors.SECONDARY,
+  paddingBottom: 'space-1200',
+  paddingTop: 'space-1400',
+};
+
+const Footer = (props: SpiritFooterProps) => {
+  const propsWithDefaults = { ...defaultStyleProps, ...props };
+  const { children, backgroundColor, paddingBottom, paddingTop, ...restProps } = propsWithDefaults;
+  const { classProps } = useFooterStyleProps({ backgroundColor, paddingBottom, paddingTop });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
-  const footerClasses = 'bg-secondary pt-1400 pb-1200';
 
   return (
-    <footer {...styleProps} {...otherProps} className={classNames(footerClasses, styleProps.className)}>
+    <footer {...styleProps} {...otherProps} className={classNames(classProps, styleProps.className)}>
       {children}
     </footer>
   );
diff --git a/packages/web-react/src/components/Footer/README.md b/packages/web-react/src/components/Footer/README.md
index 8f9d34cdfe..a3cf94849b 100644
--- a/packages/web-react/src/components/Footer/README.md
+++ b/packages/web-react/src/components/Footer/README.md
@@ -16,7 +16,7 @@ The Footer supports several ready-to-use building blocks:
 This is how all supported building blocks of the Footer build up the complete composition:
 
 ```jsx
-<Footer UNSAFE_className="bg-secondary pt-1400 pb-1200">
+<Footer>
   <Container>
     {/* Grid with navigation links */}
     {/* Grid with product logo, social media links and language switch */}
@@ -137,7 +137,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
 ## Full Example
 
 ```jsx
-<Footer UNSAFE_className="bg-secondary pt-1400 pb-1200">
+<Footer>
   <Container>
     {/* Grid with navigation links */}
     <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} spacing="space-1000">
@@ -252,11 +252,27 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
 </Footer>
 ```
 
+### API
+
+| Name              | Type                                                 | Default      | Required | Description                                     |
+| ----------------- | ---------------------------------------------------- | ------------ | -------- | ----------------------------------------------- |
+| `backgroundColor` | [Background dictionary][dictionary-background-color] | `secondary`  | ✕        | Sets the background color of the footer         |
+| `paddingBottom`   | `SpaceToken`                                         | `space-1400` | ✕        | Defines the padding at the bottom of the footer |
+| `paddingTop`      | `SpaceToken`                                         | `space-1200` | ✕        | Defines the padding at the top of the footer    |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
 [buttonlink]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/ButtonLink/README.md
+[dictionary-background-color]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#backgroundColor
 [divider]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Divider/README.md
 [flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Flex/README.md
 [grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Grid/README.md
 [product-logo]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/ProductLogo/README.md
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props
 [select]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Select/README.md
 [stack]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md
diff --git a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
index 12c2f5022f..eeb156de9d 100644
--- a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
+++ b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
@@ -187,7 +187,7 @@ const FooterDefault = () => {
             elementType="ul"
             direction={{ mobile: 'column', tablet: 'row' }}
             alignmentX={{ mobile: 'stretch', tablet: 'center' }}
-            spacing={{ mobile: 'space-600', tablet: 'space-900' }}
+            spacingX={{ mobile: 'space-600', tablet: 'space-900' }}
             isWrapping
           >
             <li>
diff --git a/packages/web-react/src/components/Footer/demo/FooterMinimalistic.tsx b/packages/web-react/src/components/Footer/demo/FooterMinimalistic.tsx
new file mode 100644
index 0000000000..f53b0ca743
--- /dev/null
+++ b/packages/web-react/src/components/Footer/demo/FooterMinimalistic.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Container } from '../../Container';
+import { Flex } from '../../Flex';
+import { Grid, GridItem } from '../../Grid';
+import { Link } from '../../Link';
+import { ProductLogo } from '../../ProductLogo';
+import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault';
+import { Select } from '../../Select';
+import Footer from '../Footer';
+
+const FooterMinimalistic = () => {
+  return (
+    <Footer paddingBottom="space-900" paddingTop="space-900">
+      <Container>
+        {/* Grid with product logo, social media links and language switch */}
+        <Grid
+          cols={{ mobile: 1, desktop: 12 }}
+          alignmentX={{ mobile: 'center', desktop: 'stretch' }}
+          alignmentY="center"
+          spacingY="space-1100"
+        >
+          {/* Product logo */}
+          <GridItem columnStart={{ desktop: 1 }} columnEnd={{ desktop: 4 }}>
+            <div className="text-desktop-left">
+              <Link href="https://www.example.com">
+                <ProductLogo>{defaultSvgLogo}</ProductLogo>
+              </Link>
+            </div>
+          </GridItem>
+
+          {/* Flex with secondary links */}
+          <GridItem columnStart={{ desktop: 4 }} columnEnd={{ desktop: 10 }}>
+            <nav className="text-center" aria-label="Secondary links">
+              <Flex
+                elementType="ul"
+                direction={{ mobile: 'column', tablet: 'row' }}
+                alignmentX={{ mobile: 'stretch', tablet: 'center' }}
+                spacingX={{ mobile: 'space-600', tablet: 'space-900' }}
+                isWrapping
+              >
+                <li>
+                  <Link href="https://www.example.com" color="secondary">
+                    Legal notice
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://www.example.com" color="secondary">
+                    Terms of service
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://www.example.com" color="secondary">
+                    Privacy policy
+                  </Link>
+                </li>
+                <li>
+                  <Link href="https://www.example.com" color="secondary">
+                    Manage cookies
+                  </Link>
+                </li>
+              </Flex>
+            </nav>
+          </GridItem>
+
+          {/* Language switch */}
+          <GridItem columnStart={{ desktop: 11 }} columnEnd={{ desktop: 13 }}>
+            <div className="text-desktop-right">
+              <Select id="select-language" name="selectLanguage" label="Language" isLabelHidden isFluid>
+                <option value="en">English</option>
+                <option value="cs">Čeština</option>
+              </Select>
+            </div>
+          </GridItem>
+        </Grid>
+      </Container>
+    </Footer>
+  );
+};
+
+export default FooterMinimalistic;
diff --git a/packages/web-react/src/components/Footer/demo/FooterNested.tsx b/packages/web-react/src/components/Footer/demo/FooterNested.tsx
index 68e09ba3a5..ca85069c4a 100644
--- a/packages/web-react/src/components/Footer/demo/FooterNested.tsx
+++ b/packages/web-react/src/components/Footer/demo/FooterNested.tsx
@@ -13,7 +13,7 @@ import FooterLinkFactory from './FooterLinkFactory';
 
 const FooterNested = () => {
   return (
-    <Footer UNSAFE_className="bg-secondary pt-1400 pb-1200">
+    <Footer>
       <Container>
         {/* Grid with navigation links */}
         <Grid cols={{ mobile: 1, tablet: 2, desktop: 6 }} spacing="space-1000">
@@ -121,7 +121,7 @@ const FooterNested = () => {
             elementType="ul"
             direction={{ mobile: 'column', tablet: 'row' }}
             alignmentX={{ mobile: 'stretch', tablet: 'center' }}
-            spacing={{ mobile: 'space-600', tablet: 'space-900' }}
+            spacingX={{ mobile: 'space-600', tablet: 'space-900' }}
             isWrapping
           >
             <li>
diff --git a/packages/web-react/src/components/Footer/demo/index.tsx b/packages/web-react/src/components/Footer/demo/index.tsx
index 9566b2c7a6..6273ab6b3b 100644
--- a/packages/web-react/src/components/Footer/demo/index.tsx
+++ b/packages/web-react/src/components/Footer/demo/index.tsx
@@ -8,6 +8,7 @@ import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
 import FooterDefault from './FooterDefault';
+import FooterMinimalistic from './FooterMinimalistic';
 import FooterNested from './FooterNested';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
@@ -19,6 +20,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Nested Link Blocks, Logo Only" stackAlignment="stretch">
         <FooterNested />
       </DocsSection>
+      <DocsSection title="Minimalistic" stackAlignment="stretch">
+        <FooterMinimalistic />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );
diff --git a/packages/web-react/src/components/Footer/index.html b/packages/web-react/src/components/Footer/index.html
index 23972ef557..8a0a07f9f5 100644
--- a/packages/web-react/src/components/Footer/index.html
+++ b/packages/web-react/src/components/Footer/index.html
@@ -1 +1 @@
-{{> web-react/demo}}
+{{> web-react/demo title="Footer" parentPageName="Components"}}
diff --git a/packages/web-react/src/components/Footer/useFooterStyleProps.ts b/packages/web-react/src/components/Footer/useFooterStyleProps.ts
new file mode 100644
index 0000000000..2f6b0f6919
--- /dev/null
+++ b/packages/web-react/src/components/Footer/useFooterStyleProps.ts
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import { SpiritFooterProps } from '../../types';
+
+export interface UseFooterStyleProps {
+  classProps: string;
+}
+
+export function useFooterStyleProps(props: Partial<SpiritFooterProps>): UseFooterStyleProps {
+  const { backgroundColor, paddingBottom, paddingTop } = props;
+
+  const footerBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
+  const footerPaddingBottom = paddingBottom ? paddingBottom.replace('space-', 'pb-') : '';
+  const footerPaddingTop = paddingTop ? paddingTop.replace('space-', 'pt-') : '';
+
+  const classProps = classNames({
+    [footerBackgroundColor]: backgroundColor,
+    [footerPaddingBottom]: paddingBottom,
+    [footerPaddingTop]: paddingTop,
+  });
+
+  return {
+    classProps,
+  };
+}
diff --git a/packages/web-react/src/types/footer.ts b/packages/web-react/src/types/footer.ts
index 6f98f0179d..591618dced 100644
--- a/packages/web-react/src/types/footer.ts
+++ b/packages/web-react/src/types/footer.ts
@@ -1,3 +1,9 @@
-import { ChildrenProps, StyleProps, TransferProps } from './shared';
+import { BackgroundColorsDictionaryType, ChildrenProps, SpaceToken, StyleProps, TransferProps } from './shared';
 
-export interface SpiritFooterProps extends ChildrenProps, StyleProps, TransferProps {}
+export interface FooterStyleProps {
+  paddingTop?: SpaceToken;
+  paddingBottom?: SpaceToken;
+  backgroundColor?: BackgroundColorsDictionaryType;
+}
+
+export interface SpiritFooterProps extends FooterStyleProps, ChildrenProps, StyleProps, TransferProps {}