Example: Code Group and Alerts

This page demonstrates tabbed code blocks and alert containers.

When to use

• Use code-group when you need to show one feature across multiple files.
• Use alerts to emphasize warnings, tips, and important constraints.
• Combine both patterns to create tutorial-style pages.

Code Group syntax

Code Group demo

Alert syntax

Alerts demo

Preview Group demo

Introduction

Writing

Examples

Validation steps

1. Confirm code tabs are visible and switchable.
2. Confirm each alert type has distinct styling.
3. Confirm preview cards are rendered in preview-group.

Common mistakes

• Missing tab labels in code-group blocks.
• Putting very large code samples in one tab set.
• Overusing alerts so important messages lose contrast.