Live Code
Storybook
Usage
PartnerLogo
PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.).
import { PartnerLogo } from '@alma-oss/spirit-web-react';
<PartnerLogo>{/* Logo goes here */}</PartnerLogo>;Sizes
The PartnerLogo component is available in sizes.
<PartnerLogo size="small">
{/* Logo goes here */}
</PartnerLogo>
<PartnerLogo size="medium">
{/* Logo goes here */}
</PartnerLogo>
<PartnerLogo size="large">
{/* Logo goes here */}
</PartnerLogo>Responsive Size
To create a PartnerLogo with responsive size, pass an object as the value for the size property, using breakpoint keys to specify different size for each screen size.
<PartnerLogo size={{ mobile: 'small', tablet: 'medium', desktop: 'large' }}>{/* Logo goes here */}</PartnerLogo>âšī¸ You can also make the logo adjust to the size of the container in which it is placed. See Fluid Size section for more details.
Disabled Safe Area
The PartnerLogo component can be displayed without the safe area (padding). Use hasSafeArea prop set to false to disable safe area around logo.
<PartnerLogo hasSafeArea={false}>{/* Logo goes here */}</PartnerLogo>Fluid Size
To adjust the PartnerLogo to the size of its container, use the isFluid prop. This allows the logo to scale while preserving its aspect ratio and ensures it remains vertically and horizontally aligned within the container.
<PartnerLogo isFluid>{/* Logo goes here */}</PartnerLogo>Content
The content of the PartnerLogo component can be an image or svg.
Image
<PartnerLogo>
<img src="path-to-logo" alt="Partner Logo" />
</PartnerLogo>đ To make the logo accessible, the image should have an alt attribute, or, if using inline SVG, the <title> element should be present.
SVG
<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>
</PartnerLogo>API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | null | â | Content of the PartnerLogo |
| hasSafeArea | boolean | true | â | If false, the PartnerLogo is displayed without safe area |
| isFluid | boolean | false | â | If true, the PartnerLogo adjusts to the size of its container |
| size | [Size dictionary | Responsive<Size dictionary>] | medium | â | Size of the PartnerLogo |
The components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.