--- title: "Callout" pageTitle: "Fylgja Callout" description: "The Fylgja Callout component styles the highlighted blocks that markdown plugins generate from blockquote syntax" npm: "@fylgja/callout" git: "https://github.com/fylgja/fylgja/tree/main/components/callout" faq: - question: Which callout types are built in? answer: Five, note, tip, important, warning, and caution. Each has its own accent color, set with light-dark() so it adapts to the color scheme. A callout with an unrecognized type, or none at all, falls back to your brand color. - question: Does the component ship the icons? answer: No. The icon comes from your markup or your markdown plugin, so any icon set works. The component only stops the svg from being squashed. Give it a fill of currentcolor and it picks up the accent color of the callout. - question: Why is the title wrapped in a strong tag? answer: The component ships three classes and leaves the rest to HTML, so the title takes its weight from strong rather than from CSS. A title without one renders at normal weight. - question: How do I make a callout collapsible? answer: Swap the div for a details element and the title paragraph for a summary, then add an svg with the callout-fold-icon class to the title. The browser handles the toggle, so no JavaScript is needed. --- import InstallTabs from "@/components/InstallTabs.astro"; The Fylgja Callout component styles the highlighted blocks that markdown plugins generate from blockquote syntax, known as callouts, alerts, or admonitions. Use it for notes, tips, warnings, and other remarks that need to stand apart from the surrounding prose. ## Installation ## Usage Once installed, you can import the full package with: ```css @import "@fylgja/callout"; ``` Alternatively, if you only need specific parts, you can import them individually: | Import Path | Description | | ------------------------ | ---------------------------------------------------------------------------- | | `@fylgja/callout/base` | Contains the core of the Callout | | `@fylgja/callout/styles` | Contains the accent color for each callout type, for example tip and warning | The component expects the structure below, where `data-callout` carries the type. ```html

Note

Useful information that users should know.

``` Only three classes are shipped, `callout`, `callout-title`, and `callout-fold-icon`. Everything else is left to HTML, so the title takes its weight from `` rather than from CSS. For Astro, the `@fylgja/astro` integration ships a `callouts` markdown plugin that renders exactly this, from GitHub alert syntax with the collapse markers of Obsidian callouts. Any other plugin works too, as long as it emits these names. ## Callout styles By default a callout is a bordered block with no background, so it sits quietly inside a body of text. A single CSS variable `--callout-style` drives the border and title color, and each type maps onto it. Five types are provided: `note`, `tip`, `important`, `warning`, and `caution`. Anything unrecognized falls back to your brand color. Icons are left to your markdown plugin. The component only keeps whatever `` it finds in the title from being squashed, so any icon set works. Give the icon `fill="currentcolor"`, or `stroke="currentcolor"` for an outline set, and it picks up the accent color.

Note

Useful information that users should know, even when skimming the page.

```html
...
```

Tip

Optional advice that helps a reader do the task better.

```html
...
```

Important

Key information a reader needs to reach their goal.

```html
...
```

Warning

Urgent information that needs immediate attention to avoid problems.

```html
...
```

Caution

Advises about risks or negative outcomes of an action.

```html
...
```

No type

Leave off the type and the callout uses your brand color, which makes it a neutral callout.

```html
...
```
## Collapsible callout For a callout the reader can fold away, swap the `
` for `
` and the title `

` for a `

`. The marker the browser puts on a summary is hidden, and a `.callout-fold-icon` in the title turns as the callout opens. Add `open` to start it expanded.
Read this before upgrading

The v3 release drops Sass. Compile from the CSS files instead, and the output stays the same.

```html
Read this before upgrading

The v3 release drops Sass.

``` ## Customization To restyle a type, override its color variable. Each type has one, `--callout-note` through `--callout-caution`, set with `light-dark()`. ```css .callout { --callout-tip: hotpink; } ``` To add a tinted background, or to change the spacing: ```css .callout { --callout-bg: color-mix(in oklab, var(--callout-style) 8%, transparent); --callout-px: 1.5rem; } ```