+
+
+
+
+
+
+
+
+```
+
+## Disabled safe area
+
+The PartnerLogo component can be displayed without the safe area (padding). Use `UNSTABLE_PartnerLogo--hasSafeAreaDisabled` modifier to disable safe area around logo.
+
+```html
+
+
+
+```
+
+## Content
+
+The content of the PartnerLogo component can be an image or svg.
+
+### Image
+
+```html
+
+
+
+
+
+
+{{/web/layout/plain }}
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index 07806fe25f..939b6f22d6 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -28,5 +28,6 @@
@forward 'UNSTABLE_Avatar';
@forward 'UNSTABLE_Divider';
@forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_PartnerLogo';
@forward 'UNSTABLE_Section';
@forward 'UNSTABLE_Slider';
+
+
+```
+
+ℹ️ Don't forget to add the `aria-label` attribute for accessible title.
+The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label`
+attribute is set on the container.
+
+### SVG
+
+```html
+
+
+
+```
+
+## Full example
+
+```html
+
+
+
+
+
+
+
+```
+
+[dictionary-size]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#size
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
new file mode 100644
index 0000000000..051e5406d5
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
@@ -0,0 +1,21 @@
+@use 'theme' as theme;
+@use 'tools';
+
+.UNSTABLE_PartnerLogo {
+ display: inline-block;
+ max-width: 100%;
+ height: fit-content;
+ border-radius: theme.$border-radius;
+ background: theme.$background-color;
+}
+
+.UNSTABLE_PartnerLogo > img,
+.UNSTABLE_PartnerLogo > svg {
+ width: fit-content;
+}
+
+@include tools.generate-logo-sizes('UNSTABLE_PartnerLogo', theme.$sizes);
+
+.UNSTABLE_PartnerLogo--hasSafeAreaDisabled {
+ padding: 0;
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
new file mode 100644
index 0000000000..d931f5819f
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
@@ -0,0 +1,18 @@
+@use '@tokens' as tokens;
+
+$background-color: tokens.$background-basic;
+$border-radius: tokens.$space-300;
+$sizes: (
+ small: (
+ height: tokens.$space-800,
+ padding: tokens.$space-400,
+ ),
+ medium: (
+ height: tokens.$space-1000,
+ padding: tokens.$space-400,
+ ),
+ large: (
+ height: 60px,
+ padding: tokens.$space-500,
+ ),
+);
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss
new file mode 100644
index 0000000000..54d4faf6e8
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss
@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '@tokens' as tokens;
+
+@mixin generate-logo-sizes($class-name, $variables) {
+ @each $size, $variables in $variables {
+ .#{$class-name}--#{$size} {
+ @if map.has-key($variables, padding) {
+ padding: map.get($variables, padding);
+ }
+ }
+
+ .#{$class-name}--#{$size} > svg,
+ .#{$class-name}--#{$size} > img {
+ @if map.has-key($variables, height) {
+ height: map.get($variables, height);
+ }
+ }
+ }
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
new file mode 100644
index 0000000000..391182cc39
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
@@ -0,0 +1,399 @@
+{{#> web/layout/plain }}
+
+Default
+
+
+
+
+ Size small
+
+
+
+
+
+
+
+ Size medium
+
+
+
+
+
+
+
+ Size large
+
+
+
+
+
+ Disabled safe area
+
+
+
+
+ Size small
+
+
+
+
+
+
+
+ Size medium
+
+
+
+
+
+
+
+ Size large
+
+
+
+
+
+