> ## 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 **Add 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 the header, description, and logo link to when clicked. Opens in a new tab. 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:

* **Row layout**: the logo displays at 80×80 pixels everywhere the box appears, including in the newsletter version of a post. Recommended upload size: between 160×160 and 300×300 pixels.
* **Column layout**: the logo displays at its uploaded size, up to a maximum of 300 pixels wide. Outpost doesn't resize images on upload, so upload a logo close to 300 pixels wide for a predictable result.
* Maximum upload size: 1 MB. For best deliverability and page speed, keep the file size to 500 KB or less.

***

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

  <Accordion title="Do sponsorship boxes look right in email newsletters?">
    Yes. The box is built as an email-safe layout with pixel sizes, so it holds its shape in Outlook for Windows as well as web and mobile clients. Keep the logo within the sizes described above, since Outpost doesn't resize images on upload.
  </Accordion>
</AccordionGroup>