> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CreatorTile

> A visual highlight tile showcasing a creator with a full-bleed background media and an overlaid profile row containing an avatar, name, optional tagline and an action element.

```tsx theme={null}
import { CreatorTile } from "@fanvue/ui";
import type { CreatorTileAspectRatio, CreatorTileProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-creatortile--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CreatorTile — Default" />
</Frame>

```tsx theme={null}
import { Button, CreatorTile } from "@fanvue/ui";

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    tagline="@fit_aitana"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    action={<Button variant="primary" size="32">
      Follow
    </Button>}
    className="rounded-lg"
  />
</div>
```

## Without Tagline

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-creatortile--without-tagline&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CreatorTile — Without Tagline" />
</Frame>

```tsx theme={null}
import { Button, CreatorTile } from "@fanvue/ui";

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    action={<Button variant="primary" size="32">
      Follow
    </Button>}
    className="rounded-lg"
  />
</div>
```

## Banner

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-creatortile--banner&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CreatorTile — Banner" />
</Frame>

```tsx theme={null}
import { Button, CreatorTile, UserDisplayName } from "@fanvue/ui";

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

<div className="w-100">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    aspectRatio="banner"
    className="rounded-lg"
    name={
      <UserDisplayName verified aiDisclosure className="text-white">
        Jane Doe
      </UserDisplayName>
    }
    tagline="@jane_doe"
    avatar={{ src: SAMPLE_AVATAR, alt: "Jane Doe", fallback: "JD" }}
    action={
      <Button variant="white" size="32" className="rounded-full">
        View Profile
      </Button>
    }
  />
</div>
```

## Without Action

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-creatortile--without-action&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CreatorTile — Without Action" />
</Frame>

```tsx theme={null}
import { Button, CreatorTile } from "@fanvue/ui";

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    tagline="@fit_aitana"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    className="rounded-lg"
  />
</div>
```

## Aspect Ratios

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-creatortile--aspect-ratios&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="400" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="CreatorTile — Aspect Ratios" />
</Frame>

```tsx theme={null}
import { Button, CreatorTile } from "@fanvue/ui";

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

<div className="flex flex-wrap items-start gap-4">
  {(["tall", "medium", "short", "banner"] as const).map((aspectRatio) => (
    <div key={aspectRatio} className="flex w-[280px] flex-col gap-2">
      <CreatorTile
        background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
        name="Aitana Lopez"
        tagline="@fit_aitana"
        avatar={{
          src: SAMPLE_AVATAR,
          alt: "Aitana Lopez",
          fallback: "AL",
        }}
        action={<Button variant="primary" size="32">
          Follow
        </Button>}
        aspectRatio={aspectRatio}
        className="rounded-lg"
      />
      <p className="typography-description-12px-regular text-content-secondary">
        aspectRatio=&quot;{aspectRatio}&quot;
      </p>
    </div>
  ))}
</div>
```

## Props

## CreatorTile

A visual highlight tile showcasing a creator with a full-bleed background media and an overlaid profile row containing an avatar, name, optional tagline and an action element.

<ParamField path="background" type="ReactNode" required>
  Decorative background media rendered behind the creator content.
</ParamField>

<ParamField path="name" type="ReactNode" required>
  Creator display name shown as the prominent heading.
</ParamField>

<ParamField path="action" type="ReactNode">
  Action element rendered on the right of the profile row (e.g. a `Button` for following the creator).
</ParamField>

<ParamField path="aspectRatio" type="&#x22;banner&#x22; | &#x22;tall&#x22; | &#x22;medium&#x22; | &#x22;short&#x22;" default="medium">
  Width-to-height ratio preset.

  * `tall` – 5:4, closest to square
  * `medium` – 3:2 landscape
  * `short` – 9:5 landscape
  * `banner` – 5:2, the slimmest preset

  The profile row is a fixed \~74px tall, so `banner` needs at least 185px of width before the ratio makes the tile shorter than its own row and the top of the row is clipped. The taller presets reach that floor at widths too narrow to be practical.
</ParamField>

<ParamField path="avatar" type={"Omit<AvatarProps & RefAttributes<HTMLSpanElement>, \"ref\">"}>
  Avatar props forwarded to the inner `Avatar`.
</ParamField>

<ParamField path="tagline" type="ReactNode">
  Optional secondary line shown under the name (e.g. handle or tagline).
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `CreatorTileAspectRatio`, `CreatorTileProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)