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

# Match your website

> Your own header, footer and page sections, so the blog looks like the rest of your site.

Three kinds of files make the blog match your website, which are your own header, your own footer and slots that fill fixed places on every page.

<Tip>
  When you create a site from a repository without `blog.json`, Notra offers **Open starter PR (optional)**, which reads your Brand Identity and website and opens a pull request with `blog.json`, `header.mdx`, `footer.mdx` and a first post that already use your logo, colors and links.
</Tip>

## Header and footer

Add `header.mdx` or `footer.mdx` next to `blog.json`, and each replaces the theme's own. Write plain markup with Tailwind classes. You can paste HTML from your landing page if you change `class` to `className`, close empty tags like `<img />` and remove `<!-- -->` comments, because these files are [MDX](/docs/sites/components/overview#mdx-differs-from-markdown).

```mdx header.mdx theme={"system"}
<header className="border-b border-border">
  <div className="site-container flex h-16 items-center gap-6">
    <a href="https://acme.com" className="flex items-center gap-2 font-semibold">
      <img src="/images/logo.svg" alt="" className="h-6" />
      Acme
    </a>
    <SiteAreas />
    <nav className="ml-auto hidden gap-6 text-sm md:flex">
      <a href="https://acme.com/product" className="text-muted-foreground hover:text-foreground">Product</a>
      <a href="https://acme.com/pricing" className="text-muted-foreground hover:text-foreground">Pricing</a>
    </nav>
    <ThemeToggle />
  </div>
</header>
```

Two built-in components cover what the theme's header did:

| Component | What it renders |
| - | - |
| `<SiteAreas />` | The Blog and Changelog switch, with the current one highlighted, and nothing when only one section is on |
| `<ThemeToggle />` | The light and dark mode button (hidden when `appearance.strict` is set) |

Interactive parts like a mobile menu go in a component in `snippets/` that you import as usual. See [Your own components](/docs/sites/custom-components). Wrap your content in `site-container` to give it the same width as the posts below (it follows `layout.width`). Theme colors are available as these Tailwind classes: `bg-background`, `text-foreground`, `bg-muted`, `text-muted-foreground`, `border-border`, `bg-card`, `bg-primary` and `text-primary`.

The header and footer get no data, so write your site name and links into them directly. With your own header, the navbar IDs like `#topbar-cta-button` don't exist, so use your own class names. When Notra branding is on, Notra adds a small "Powered by Notra" line under your footer.

## Slots

Slots add your own content at fixed places, and each one is a file in `slots/`:

| File | Where it appears | Data you can use |
| - | - | - |
| `slots/blog-hero.mdx` | Replaces the top of the blog home | `site`, `area` |
| `slots/changelog-hero.mdx` | Replaces the top of the changelog | `site`, `area` |
| `slots/before-post.mdx` | Above every post | `post` |
| `slots/after-post.mdx` | Below every post | `post` |
| `slots/sidebar.mdx` | Next to every post under "On this page" on wide screens, above the post on phones and below the post in the narrow layout | `post` |
| `slots/after-changelog-entry.mdx` | Below every changelog entry, on the index and on the entry's page | `entry` |

| Data | Fields |
| - | - |
| `site` | `name`, `description` |
| `area` | `id` (`blog` or `changelog`), `title`, `description`, `url` |
| `post` | `title`, `description`, `date` (formatted), `tags`, `authors` (each with `name`, `title`, `url`), `url` |
| `entry` | `title`, `version`, `date` (formatted), `url` |

```mdx slots/after-post.mdx theme={"system"}
<div className="mt-12 rounded-xl border border-border p-6">
  <p className="font-semibold">Enjoyed "{post.title}"?</p>
  <p className="mt-1 text-sm text-muted-foreground">Try Acme free for 14 days.</p>
  <a href="https://acme.com/signup" className="mt-4 inline-block rounded-lg bg-primary px-4 py-2 text-sm text-white">Start free trial</a>
</div>
```

A call to action under every post, a newsletter form or a product card in the sidebar each fit in a slot, while a file in `slots/` with any other name stops the build with `Unknown slot` and the list of valid names.

## Your own CSS

For anything the settings and files don't cover, add `style.css`, which loads after the theme so it can override any style. See [Design and CSS](/docs/sites/customize/design#your-own-css).

## What isn't allowed

Header, footer and slots follow the same rules as posts, so imports only come from your repository and Notra doesn't allow `<script>` tags. Put JavaScript in `script.js` instead. See [Analytics and scripts](/docs/sites/analytics-and-scripts).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.