---
banner:
  content: "🎉 Version 2.0 is here! <a href='/migration'>Read the migration guide</a>."
---

Overview

The Banner component renders a full-width notification bar at the top of the page. It supports HTML content and is controlled through frontmatter.

Props

Features

• Renders raw HTML, so you can include links, bold text, etc.
• Sits above the header in the page layout
• Has data-pagefind-ignore to exclude from search indexing
• Styled with the .sl-banner class
• Only renders when content is provided (conditional display)

Example Content

banner:
  content: "Welcome to the new docs! <a href='/docs/getting-started/'>Get started here</a>."

Styling

The banner uses the following CSS classes:

• .sl-banner — Main container with background color and padding
• Content is injected via innerHTML for HTML support