# Cover

The Cover component helps you create fixed-height layouts with the option for
vertically centered content. It's great for creating hero sections, marketing
callouts, or any layout where you want content to fill the available vertical
space.

## Design & usage guidelines

Use Cover when you need to:

* Create full-height layouts with centered content
* Build hero sections or splash screens
* Display content that should fill the available vertical space

## Basic example

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

export function CoverHeroExample() {
  return (
    <Cover minHeight="50vh">
      <Text>Content above</Text>
      <Cover.Center>
        <Heading>Welcome back!</Heading>
        <Text>Sign in to continue to your account.</Text>
      </Cover.Center>
      <Text>Content below</Text>
    </Cover>
  );
}
```

### Cover.Center

Use `Cover.Center` to vertically center content within the Cover component.
Content within `Cover.Center` will be automatically centered in the available
space.

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

export function CoverCenterExample() {
  return (
    <Cover minHeight="40vh">
      <Cover.Center>
        <Heading>Welcome back!</Heading>
        <Text>Sign in to continue to your account.</Text>
      </Cover.Center>
    </Cover>
  );
}
```

## Best practices

* Use meaningful minimum heights that make sense for your content
* Consider the viewport height (`vh`) units for full-screen covers
* Ensure content within `Cover.Center` is properly structured for vertical
  centering


## Props

### Web

#### Cover

| 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`. |
| `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
| `gap` | `GapSpacing` | No | — | The amount of space around the centered content |
| `id` | `string` | No | — | Standard HTML id attribute. |
| `minHeight` | `string` | No | — | The minimum height of the element. Suggested to use `vh` units. |
| `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... |

#### Cover.Center

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
| `as` | `CommonAllowedElements` | No | — |  |
| `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` | `{ centerContent?: string; }` | No | — |  |
| `UNSAFE_style` | `{ centerContent?: CSSProperties; }` | No | — |  |