Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Use alt and <title> in UNSTABLE_PartnerLogo and UNSTABLE_ProductLogo #1651

Merged
merged 2 commits into from
Sep 19, 2024
Merged

Fix: Use alt and <title> in UNSTABLE_PartnerLogo and UNSTABLE_ProductLogo #1651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
169a75a
Fix(web): Use `alt` and `<title>` in `UNSTABLE_PartnerLogo` and `UNST…
adamkudrna Sep 17, 2024
1f0eb2b
Fix(web-react): Use `alt` and `<title>` in `UNSTABLE_PartnerLogo` and…
adamkudrna Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 16 additions & 18 deletions packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ PartnerLogo is a component designed to display the partner's logo (e.g. advertis
```jsx
import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react';

<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
<!-- Logo go here -->
<UNSTABLE_PartnerLogo>
<!-- Logo goes here -->
</UNSTABLE_PartnerLogo>
```

Expand All @@ -18,14 +18,14 @@ import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react';
The PartnerLogo component is available in [sizes][dictionary-size].

```jsx
<UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner">
<!-- Logo go here -->
<UNSTABLE_PartnerLogo size="small">
<!-- Logo goes here -->
</UNSTABLE_PartnerLogo>
<UNSTABLE_PartnerLogo size="medium" aria-label="Logo of the partner">
<!-- Logo go here -->
<UNSTABLE_PartnerLogo size="medium">
<!-- Logo goes here -->
</UNSTABLE_PartnerLogo>
<UNSTABLE_PartnerLogo size="large" aria-label="Logo of the partner">
<!-- Logo go here -->
<UNSTABLE_PartnerLogo size="large">
<!-- Logo goes here -->
</UNSTABLE_PartnerLogo>
```

Expand All @@ -34,8 +34,8 @@ The PartnerLogo component is available in [sizes][dictionary-size].
The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeAreaDisabled` prop to disable safe area around logo.

```jsx
<UNSTABLE_PartnerLogo aria-label="Logo of the partner" hasSafeAreaDisabled>
<!-- Logo go here -->
<UNSTABLE_PartnerLogo hasSafeAreaDisabled>
<!-- Logo goes here -->
</UNSTABLE_PartnerLogo>
```

Expand All @@ -46,27 +46,25 @@ The content of the PartnerLogo component can be an image or svg.
### Image

```jsx
<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
<img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
<UNSTABLE_PartnerLogo>
<img src="path-to-logo" alt="Partner Logo" />
</UNSTABLE_PartnerLogo>
```

ℹ️ 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.
👉 To make the logo accessible, the image should have an `alt` attribute, or, if using inline SVG, the `<title>` element
should be present.

### SVG

```jsx
<UNSTABLE_PartnerLogo aria-label="Logo of the partner">
<UNSTABLE_PartnerLogo>
<svg width="300" height="130">
<title>Partner Logo</title>
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
</svg>
</UNSTABLE_PartnerLogo>
```

ℹ️ Don't forget to add the `aria-label` attribute for accessible title.

## API

| Name | Type | Default | Required | Description |
Expand Down
1 change: 1 addition & 0 deletions packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo';

const logo = (
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clipPath="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down
1 change: 1 addition & 0 deletions ...es/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
hasSafeAreaDisabled: false,
children: (
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clipPath="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down
25 changes: 12 additions & 13 deletions packages/web-react/src/components/UNSTABLE_ProductLogo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ The ProductLogo component is used to display the logo of the product.
```jsx
import { UNSTABLE_ProductLogo } from '@spirit/web-react';

<UNSTABLE_ProductLogo aria-label="Logo of the product">
<!-- Logo go here -->
<UNSTABLE_ProductLogo>
<!-- Logo goes here -->
</UNSTABLE_ProductLogo>;
```

Expand All @@ -21,8 +21,8 @@ It is necessary to insert the appropriate inverted logo variant as a children.
```jsx
import { UNSTABLE_ProductLogo } from '@spirit/web-react';

<UNSTABLE_ProductLogo isInverted aria-label="Logo of the product">
<!-- Inverted logo go here -->
<UNSTABLE_ProductLogo isInverted>
<!-- Inverted logo goes here -->
</UNSTABLE_ProductLogo>;
```

Expand All @@ -33,28 +33,27 @@ The content of the ProductLogo component can be an image or svg.
### Image

```jsx
<UNSTABLE_ProductLogo aria-label="Logo of the product">
<img src="path-to-logo" alt="Product Logo" height="60px" width="120px" aria-hidden="true" />
<UNSTABLE_ProductLogo>
<img src="path-to-logo" alt="Product Logo" height="60" width="120" />
</UNSTABLE_ProductLogo>
```

ℹ️ 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. To reduce the unexpected layout shifts, it is strongly recommended
to specify the `height` and `width` of the embedded image.
👉 To make the logo accessible, the image should have an `alt` attribute, or, if using inline SVG, the `<title>` element
should be present.

👉 To avoid unexpected layout shifts, it is strongly recommended to specify the `width` and `height` of the embedded
image.

### SVG

```jsx
<UNSTABLE_ProductLogo aria-label="Logo of the product">
<UNSTABLE_ProductLogo>
<svg width="300" height="130">
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
</svg>
</UNSTABLE_ProductLogo>
```

ℹ️ Don't forget to add the `aria-label` attribute for accessible title.

## API

| Name | Type | Default | Required | Description |
Expand Down
5 changes: 2 additions & 3 deletions packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';

export const defaultSvgLogo = (
<svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Product logo</title>
<g clipPath="url(#clip0_19404_2964)">
<path
fillRule="evenodd"
Expand Down Expand Up @@ -68,8 +69,6 @@ export const defaultSvgLogo = (
</svg>
);

const ProductLogoDefault = () => (
<UNSTABLE_ProductLogo aria-label="Logo of the JobBoard">{defaultSvgLogo}</UNSTABLE_ProductLogo>
);
const ProductLogoDefault = () => <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>;

export default ProductLogoDefault;
7 changes: 2 additions & 5 deletions packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';

export const invertedSvgLogo = (
<svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>JobBoard logo</title>
<g clipPath="url(#clip0_19404_2967)">
<path
fillRule="evenodd"
Expand Down Expand Up @@ -55,10 +56,6 @@ export const invertedSvgLogo = (
</svg>
);

const ProductLogoDefault = () => (
<UNSTABLE_ProductLogo isInverted aria-label="Logo of the JobBoard">
{invertedSvgLogo}
</UNSTABLE_ProductLogo>
);
const ProductLogoDefault = () => <UNSTABLE_ProductLogo isInverted>{invertedSvgLogo}</UNSTABLE_ProductLogo>;

export default ProductLogoDefault;
39 changes: 20 additions & 19 deletions packages/web/src/scss/components/UNSTABLE_PartnerLogo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.).

```html
<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
<!-- Logo go here -->
<div class="UNSTABLE_PartnerLogo">
<!-- Logo goes here -->
</div>
```

Expand All @@ -17,14 +17,14 @@ The PartnerLogo component is available in [sizes][dictionary-size].
Use the `UNSTABLE_PartnerLogo--<size>` modifier class to change the size of the PartnerLogo component.

```html
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small" aria-label="Logo of the partner">
<!-- Logo go here -->
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small">
<!-- Logo goes here -->
</div>
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
<!-- Logo go here -->
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
<!-- Logo goes here -->
</div>
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large" aria-label="Logo of the partner">
<!-- Logo go here -->
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
<!-- Logo goes here -->
</div>
```

Expand All @@ -34,8 +34,8 @@ The PartnerLogo component can be displayed without the safe area (padding). Use

```html
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
<!-- Logo go here -->
</UNSTABLE_PartnerLogo>
<!-- Logo goes here -->
</div>
```

## Content
Expand All @@ -45,20 +45,20 @@ The content of the PartnerLogo component can be an image or svg.
### Image

```html
<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
<img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
<div class="UNSTABLE_PartnerLogo">
<img src="path-to-logo" alt="Partner Logo" />
</div>
```

ℹ️ 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.
👉 To make the logo accessible, the image should have an `alt` attribute, or, if using inline SVG, the `<title>` element
should be present.

### SVG

```html
<div class="UNSTABLE_PartnerLogo" aria-label="Logo of the partner">
<div class="UNSTABLE_PartnerLogo">
<svg width="300" height="130">
<title>Partner Logo</title>
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
</svg>
</div>
Expand All @@ -67,12 +67,13 @@ attribute is set on the container.
## Full Example

```html
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium" aria-label="Logo of the partner">
<img src="path-to-logo" alt="Partner Logo" aria-hidden="true" />
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
<img src="path-to-logo" alt="Partner Logo" />
</div>

<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large" aria-label="Logo of the partner">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
<svg width="300" height="130">
<title>Partner Logo</title>
<rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
</svg>
</div>
Expand Down
6 changes: 6 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_PartnerLogo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ <h3>Size small</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down Expand Up @@ -72,6 +73,7 @@ <h3>Size medium</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down Expand Up @@ -136,6 +138,7 @@ <h3>Size large</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down Expand Up @@ -206,6 +209,7 @@ <h3>Size small</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--small UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down Expand Up @@ -270,6 +274,7 @@ <h3>Size medium</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--medium UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down Expand Up @@ -334,6 +339,7 @@ <h3>Size large</h3>
<div style="background-color: rgb(242, 243, 245); padding: 48px;">
<div class="UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--large UNSTABLE_PartnerLogo--hasSafeAreaDisabled">
<svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Partner Logo</title>
<g clip-path="url(#clip0_20364_10)">
<path
d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"
Expand Down
Loading
Loading