Callout
The Callout component wraps content in a visually distinct card with a red accent gradient bar at the top. It uses glass-morphism styling (translucent background, subtle border).
Import
import Callout from '@mdx/Callout.astro';Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional bold title above the content |
class | string | — | Additional CSS classes for the container |
Content is passed as a slot (children).
Live Examples
Without title
This is a callout without a title. Use it to highlight important information.
With title
Important
This callout has a title displayed above the body text.
Implementation Notes
Styling: The component uses a gradient top bar (from-bears-accent via-bears-accent/80 to-transparent), a translucent background (bg-white/[0.03]), and a subtle border (border-white/10). The last child element’s bottom margin is removed via [&>:last-child]:!mb-0.
Source: src/components/mdx/Callout.astro