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

# Sponsorship Boxes

> Create branded sponsor blocks with configurable styles, then drop them into Ghost posts as a draft or via copy/paste.

export const PlanStatus = ({tier, status, beta, deprecated}) => {
  const variants = {
    luna: {
      bg: "#8340B9",
      color: "#ffffff",
      border: "1px solid #8340B9"
    },
    voyager: {
      bg: "#6B2FA0",
      color: "#ffffff",
      border: "1px solid #6B2FA0"
    },
    "space-station": {
      bg: "transparent",
      color: "#8340B9",
      border: "1px solid #8340B9"
    },
    "all-plans": {
      bg: "transparent",
      color: "#525252",
      border: "1px solid #a3a3a3"
    },
    labs: {
      bg: "transparent",
      color: "#a16207",
      border: "1px solid #a16207"
    },
    beta: {
      bg: "transparent",
      color: "#a16207",
      border: "1px solid #a16207"
    },
    "invite-only": {
      bg: "transparent",
      color: "#525252",
      border: "1px solid #a3a3a3"
    },
    bespoke: {
      bg: "transparent",
      color: "#525252",
      border: "1px solid #a3a3a3"
    },
    "outpost-hosted": {
      bg: "transparent",
      color: "#525252",
      border: "1px solid #a3a3a3"
    },
    deprecated: {
      bg: "transparent",
      color: "#b91c1c",
      border: "1px solid #b91c1c"
    }
  };
  const chip = (variant, label) => {
    const s = variants[variant] || variants["all-plans"];
    return <span key={variant + ":" + label} style={{
      display: "inline-flex",
      alignItems: "center",
      padding: "0.15rem 0.55rem",
      fontSize: "0.7rem",
      fontWeight: 700,
      letterSpacing: "0.05em",
      textTransform: "uppercase",
      borderRadius: "3px",
      lineHeight: 1.4,
      whiteSpace: "nowrap",
      backgroundColor: s.bg,
      color: s.color,
      border: s.border
    }}>
        {label}
      </span>;
  };
  const tierLabel = {
    "luna": "Luna",
    "voyager+": "Voyager+",
    "voyager-luna": "Voyager + Luna",
    "space-station+": "Space Station+",
    "all-plans": "All plans"
  };
  const tierVariant = {
    "luna": "luna",
    "voyager+": "voyager",
    "voyager-luna": "voyager",
    "space-station+": "space-station",
    "all-plans": "all-plans"
  };
  const statusLabel = {
    "labs": "Labs",
    "invite-only": "Invite-only",
    "bespoke": "Bespoke",
    "deprecated": "Deprecated",
    "outpost-hosted": "Outpost Hosted"
  };
  return <span style={{
    display: "inline-flex",
    gap: "0.4rem",
    flexWrap: "wrap",
    alignItems: "center",
    margin: "0 0 1.25rem 0"
  }}>
      {tier && chip(tierVariant[tier], tierLabel[tier])}
      {status && chip(status, statusLabel[status])}
      {beta && chip("beta", "Beta")}
      {deprecated && chip("deprecated", "Deprecated")}
    </span>;
};

<PlanStatus tier="voyager+" status="labs" />

Sponsorship boxes are visual promotional blocks designed for formal sponsorship placements — a named sponsor with a header, description, optional logo, and call-to-action link, styled to match your publication's brand.

<Frame caption="Sponsorship Boxes list showing date, header text, URL, and row actions">
  <img src="https://mintcdn.com/outpost-eb0cfbad/Puv2oanajvRKHMQC/images/labs/sponsorship-boxes-list.png?fit=max&auto=format&n=Puv2oanajvRKHMQC&q=85&s=299ae52f7233d86518adf84748b6a562" alt="Sponsorship Boxes DataTable with date, header text, URL, and Create New Post / Copy/Paste actions" width="3080" height="1935" data-path="images/labs/sponsorship-boxes-list.png" />
</Frame>

***

## Creating a sponsorship box

Go to **Sponsorship Boxes** under the Labs group in the left navigation and click **New Sponsorship Box**.

### Text fields

| Field           | Description                                                           |
| --------------- | --------------------------------------------------------------------- |
| **Header**      | The sponsor name or label (e.g., "Sponsored by Acme Corp"). Required. |
| **Description** | The sponsor's message or ad copy.                                     |
| **URL**         | Where clicking the sponsorship box takes the reader. Required.        |

### Design

The Design tab covers the visual treatment of the box.

| Setting         | Description                                                                                            |
| --------------- | ------------------------------------------------------------------------------------------------------ |
| **Style**       | Layout variant: **Row** (horizontal, side-by-side) or **Column** (vertical, stacked). Defaults to Row. |
| **Header**      | Combined font, size, and color for the sponsor header text.                                            |
| **Description** | Combined font, size, and color for the sponsor description text.                                       |
| **Background**  | Background color for the box.                                                                          |
| **Border**      | Border color for the box.                                                                              |

### Image

Use the Image tab to attach a sponsor logo:

* The logo displays at 80×80 pixels in the Row layout.
* Recommended upload size: between 160×160 and 300×300 pixels.
* Maximum upload size: 1 MB.

***

## Adding a box to a Ghost post

Each row in the Sponsorship Boxes list has two action buttons:

### Create New Post

Click **Create New Post** to have Outpost create a Ghost draft for you. The draft contains the rendered sponsorship box HTML wrapped in Ghost's HTML card markup. Open the draft in Ghost to add a title and surrounding copy, then publish.

### Copy/Paste

Click **Copy/Paste** to copy the rendered box HTML to your clipboard. In Ghost, add an **HTML card** to any post and paste the HTML in.

<Note>
  Both actions snapshot the HTML at the moment you click. Editing the box later in Outpost does not update existing Ghost posts — re-create the post or re-copy and replace the HTML card to pick up changes.
</Note>

***

## Use cases

* **Newsletter sponsors** — Drop a "Brought to you by..." block into the top of sponsored posts.
* **Affiliate partnerships** — Embed partner promotions with tracked links.
* **Internal promotions** — Cross-promote your own products, events, or subscription tiers.
* **Rotating sponsors** — Create multiple boxes and use a different one per post.

***

## Related features

<CardGroup cols={2}>
  <Card title="Ad Campaigns" icon="rectangle-ad" href="/features/ad-campaigns">
    Scheduled, audience-targeted ads on Ghost post pages.
  </Card>

  <Card title="In-Post Ad Inserter" icon="ad" href="/features/ad-tool">
    Always-on placement of In-Post Box CTAs into post content.
  </Card>

  <Card title="CTAs" icon="bullhorn" href="/features/ctas">
    Conversion-focused calls to action for subscriptions and engagement.
  </Card>
</CardGroup>

***

## FAQ

<AccordionGroup>
  <Accordion title="What's the difference between Sponsorship Boxes and Ad Campaigns?">
    Sponsorship Boxes are individual sponsor blocks you create once and drop into a single Ghost post. [Ad Campaigns](/features/ad-campaigns) is a scheduled, audience-targeted system that runs across many posts on your site.
  </Accordion>

  <Accordion title="How many sponsorship boxes can I create?">
    There's no limit. Create as many as you need for different sponsors, campaigns, or placements.
  </Accordion>

  <Accordion title="Do sponsorship boxes work with any Ghost theme?">
    Yes. The rendered HTML is wrapped in Ghost's standard HTML card markup, so any theme that supports HTML cards renders the box correctly.
  </Accordion>

  <Accordion title="What happens if I edit a box after inserting it into a Ghost post?">
    The Ghost post is unchanged. Both **Create New Post** and **Copy/Paste** snapshot the HTML at the moment you click. To update an existing post, re-copy the HTML or create a new draft and replace the HTML card.
  </Accordion>
</AccordionGroup>