<Info>
  Helpful information users should know.
</Info>

<Warning>
  Important notice that requires attention.
</Warning>

<Tip>
  Helpful advice or shortcut.
</Tip>

<Note>
  Additional context or explanation.
</Note>

<Card title="Card Title" icon="star" href="/path">
  Card content description.
</Card>

<CardGroup cols={2}>
  <Card title="Feature 1" icon="star">
    Description of feature 1.
  </Card>
  <Card title="Feature 2" icon="bolt">
    Description of feature 2.
  </Card>
</CardGroup>

<Accordion title="Section Title" icon="icon-name">
  Content that can be expanded/collapsed.
</Accordion>

<AccordionGroup>
  <Accordion title="First Section" icon="star">
    Content for first section.
  </Accordion>
  <Accordion title="Second Section" icon="bolt">
    Content for second section.
  </Accordion>
</AccordionGroup>

<Update 
  label="February 4, 2026" 
  tags={["feature", "billing"]} 
  description="Brief description"
>
  **Key highlight** — What changed and why it matters.
  
  - Bullet point 1
  - Bullet point 2
  
  [Read full update →](/help/release-notes/path)
</Update>

<Steps>
  <Step title="Step One">
    Instructions for first step.
  </Step>
  <Step title="Step Two">
    Instructions for second step.
  </Step>
  <Step title="Step Three">
    Instructions for third step.
  </Step>
</Steps>

<Tabs>
  <Tab title="Tab One">
    Content for the first tab.
  </Tab>
  <Tab title="Tab Two">
    Content for the second tab.
  </Tab>
</Tabs>

<Badge color="green">New</Badge>
<Badge color="blue">Updated</Badge>
<Badge color="red">Fixed</Badge>
<Badge color="purple">Beta</Badge>

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

```typescript
const example = "code";

### With Title

```mdx
```typescript Example Code
const example = "code";

### With Highlighting

```mdx
```typescript {2,4-5}
const line1 = "normal";
const line2 = "highlighted";
const line3 = "normal";
const line4 = "highlighted";
const line5 = "highlighted";

### Diff View

```mdx
```typescript
const old = "value"; // [!code --]
const new = "value"; // [!code ++]

**Note**: Use code blocks sparingly in release notes. Users are non-technical.

---

## Frames (Images)

```mdx
<Frame caption="Screenshot description">
  <img src="/path/to/image.png" alt="Descriptive alt text" />
</Frame>

---
title: "Update Title"
date: "YYYY-MM-DD"
severity: "minor"
audience: "All"
tags: ["feature"]
components: ["dashboard"]
---

# Update Title

## Summary

Brief overview in 2-3 sentences.

## What's New

- **Feature name** — What it does
- **Another feature** — What it does

## Why It Matters

<CardGroup cols={2}>
  <Card title="Benefit 1" icon="star">
    Explanation of benefit.
  </Card>
  <Card title="Benefit 2" icon="bolt">
    Explanation of benefit.
  </Card>
</CardGroup>

## How to Use

<Steps>
  <Step title="Navigate to Page">
    Click **profile avatar** → **Billing**.
  </Step>
  <Step title="Click Button">
    Click **Change plan**.
  </Step>
</Steps>

## Migration Guide

### Breaking Changes

| Feature | Change | Action |
|---------|--------|--------|
| Old API | Deprecated | Use new endpoint |

<Warning>
  This is a breaking change. Update before [date].
</Warning>

## Related

- [Documentation Link](/help/path)

"icons": {
  "library": "fontawesome"
}

"colors": {
  "primary": "#187AB4",
  "light": "#5BC0F0",
  "dark": "#1F8AC8"
}

✅ "icon": "scale-balanced"     // FA6 name
❌ "icon": "scale"              // Not valid in FA6 — renders blank
❌ "icon": "bar-chart"          // FA4 alias removed in FA6
❌ "icon": "message-square"     // Lucide name — not FA6