Directory
- Welcome
Aside Component
Enhance your content with visually distinct callouts that grab attention and improve readability. The Aside component helps users quickly identify important information through carefully chosen colors and icons.
Quick Start
<Aside variant="tip"> Perfect for highlighting key takeaways, warnings, tips, and supplementary information in your content.</Aside>Available Variants
Choose from four pre-styled variants to match your content needs:
Styling Variations
Combine variants with different styles using the styling prop:
Customization Options
Make the Aside component your own:
Aside Component Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | info | tip | caution | danger | info | Visual style of the aside |
| styling | minimal | outlined | modern | Additional style variations | |
| customIcon | string | Custom SVG icon markup | |
| title | string | Override the default title | |
| showIcon | boolean | true | Toggle icon visibility |
| interactive | boolean | false | Add hover effects |
Why Use Asides?
-
Improved Readability: Break up long content with visually distinct sections
-
Better Information Hierarchy: Help users quickly identify important information
-
Consistent Styling: Maintain a professional look across your documentation
-
Accessibility Built-in: ARIA labels and semantic HTML included
-
Flexible Implementation: Works anywhere in your content flow
Limited Time Launch Sale
Ready to enhance your content with beautiful, accessible callouts? Get our AstroJS starter template now and start building engaging documentation in minutes.
GET 60% OFF!
