This content is a draft.
This is a custom content notice.
<ContentNotice icon="warning" label="This is a custom content notice." />Draft
---
draft: true
---Overview
Content notice components display inline alert banners within the page content. There are three variants:
- ContentNotice — Base component with customizable icon and label
- DraftContentNotice — Pre-configured for draft pages
- FallbackContentNotice — Pre-configured for untranslated content
This page is marked as draft: true in its frontmatter, so you should see a draft notice rendered above.
ContentNotice Props
| Prop | Type | Description |
|---|---|---|
icon | string | Icon name to display |
label | string | Notice text content |
DraftContentNotice
A wrapper around ContentNotice with a warning icon and default "Draft" label.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Draft" | Override the default label |
Activated automatically by the Page component when draft: true is set in frontmatter:
---
draft: true
---FallbackContentNotice
A wrapper around ContentNotice with a warning icon for untranslated pages.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "This page has not been translated yet." | Override the default label |
Activated automatically when the isFallback flag is set in RouteData.
Styling
.sl-content-notice— Container with flex layout- Icon is colored with
--sl-color-orange-high - Content flows in a row layout using
.sl-flex