# Frame

Frame is a component that creates a fixed aspect ratio container for content.
It's particularly useful for handling images and videos, ensuring they maintain
consistent proportions across different screen sizes.

## Usage

Frame accepts any content as a child element and maintains the specified aspect
ratio. By default, it uses a 16:9 ratio, but this can be customized using the
`aspectX` and `aspectY` props.

```tsx
import React from "react";
import { Frame } from "@jobber/components/Frame";

export function FrameBasicExample() {
  return (
    <Frame>
      <img src="https://placehold.co/600x400?text=Photo" alt="Photo" />
    </Frame>
  );
}
```

### Common aspect ratios

Frame supports various aspect ratios through its `n` (numerator) and `d`
(denominator) props:

#### 1:1 (square)

```tsx
import React from "react";
import { Frame } from "@jobber/components/Frame";

export function FrameSquareExample() {
  return (
    <Frame aspectX={1} aspectY={1}>
      <img
        src="https://placehold.co/600x400?text=Profile+photo"
        alt="Profile photo"
      />
    </Frame>
  );
}
```

#### 4:3

```tsx
import React from "react";
import { Frame } from "@jobber/components/Frame";

export function FrameFourByThreeExample() {
  return (
    <Frame aspectX={4} aspectY={3}>
      <img
        src="https://placehold.co/600x400?text=Classic+photo"
        alt="Classic photo"
      />
    </Frame>
  );
}
```

### Content handling

Frame automatically centers its content and handles overflow. Images and videos
are set to `object-fit: cover` by default, ensuring they fill the frame while
maintaining their aspect ratio.

```tsx
import React from "react";
import { Frame } from "@jobber/components/Frame";
import { Box } from "@jobber/components/Box";
import { Heading } from "@jobber/components/Heading";
import { Text } from "@jobber/components/Text";

export function FrameWithContentExample() {
  return (
    <Frame>
      <Box padding="base">
        <Heading level={2}>It Works for Content As Well</Heading>
        <Text>Everything is centered and cropped to fit the aspect ratio.</Text>
      </Box>
    </Frame>
  );
}
```

## Related components

* For responsive layouts with multiple frames, consider using
  [Tiles](../Tiles/Tiles.md)
* For full-height layouts with centered content, use [Cover](../Cover/Cover.md)


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
| `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
| `aspectX` | `number` | No | `16` | The horizontal (width) part of the aspect ratio |
| `aspectY` | `number` | No | `9` | The vertical (height) part of the aspect ratio |
| `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
| `id` | `string` | No | — | Standard HTML id attribute. |
| `role` | `AriaRole` | No | — | Standard HTML role attribute. |
| `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
| `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |