> ## 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.

# CreatorCover

> A creator profile hero with a stylised blurred backdrop, central cover image, status pill, name, tagline, and primary call to action.

```tsx theme={null}
import { CreatorCover } from "@fanvue/ui";
import type { CreatorCoverProps, CreatorCoverSlot } from "@fanvue/ui";
```

## Examples

## Default

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

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

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

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>
```

## Without Tag

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

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

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>
```

## Name Only

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

```tsx theme={null}
import { CreatorCover } from "@fanvue/ui";

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

<CreatorCover imageSrc={sampleImage} imageAlt="Jane Doe" name="JANE DOE" />
```

## Without Tagline

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

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

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>
```

## Separate Background

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

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

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
  backgroundSrc="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&h=900&fit=crop"
/>
```

## Props

## CreatorCover

A creator profile hero with a stylised blurred backdrop, central cover image, status pill, name, tagline, and primary call to action.

<ParamField path="imageSrc" type="string" required>
  URL of the creator image displayed in the centre card. Also used as the blurred backdrop unless `backgroundSrc` is provided.
</ParamField>

<ParamField path="name" type="string" required>
  Creator's name, rendered as the heading.
</ParamField>

<ParamField path="action" type="ReactNode">
  Primary call to action displayed below the title.
</ParamField>

<ParamField path="backgroundSrc" type="string" default="imageSrc">
  Override URL used for the blurred background image.
</ParamField>

<ParamField path="fadeBottom" type="boolean" default="false">
  When `true`, fades the bottom of the component to transparent and increases bottom padding to 64px.
</ParamField>

<ParamField path="imageAlt" type="string">
  Alt text for the centre cover image.
</ParamField>

<ParamField path="tag" type="CreatorCoverSlot">
  Status label rendered as a pill overlapping the bottom of the cover image (e.g. "New Joiner"). Strings render with default green pill styling; pass a node for custom markup.
</ParamField>

<ParamField path="tagline" type="string">
  Smaller subtitle below the name (e.g. "GLOBAL POPSTAR"). Rendered uppercase in the brand colour.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `CreatorCoverProps`, `CreatorCoverSlot`.

***

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