Aside / Admonition Variants

Variant

Type

notetipcautiondanger

Icon Style

✨

Icon Size

✨

variant="hybrid"type="note"

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

All Variants

Each variant with its default icon style shown across all types.

classic

Simple left border with flat background

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

Tip

This is a tip message. It provides important information to the reader with appropriate visual styling for the content type.

Caution

This is a caution message. It provides important information to the reader with appropriate visual styling for the content type.

Danger

This is a danger message. It provides important information to the reader with appropriate visual styling for the content type.

refined

Gradient background fading right + icon with subtle pill background

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

Tip

This is a tip message. It provides important information to the reader with appropriate visual styling for the content type.

Caution

This is a caution message. It provides important information to the reader with appropriate visual styling for the content type.

Danger

This is a danger message. It provides important information to the reader with appropriate visual styling for the content type.

card

Full bordered card with colored icon badge, no left border

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

Tip

This is a tip message. It provides important information to the reader with appropriate visual styling for the content type.

Caution

This is a caution message. It provides important information to the reader with appropriate visual styling for the content type.

Danger

This is a danger message. It provides important information to the reader with appropriate visual styling for the content type.

minimal

Top border only, uppercase title, ultra-subtle editorial style

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

Tip

This is a tip message. It provides important information to the reader with appropriate visual styling for the content type.

Caution

This is a caution message. It provides important information to the reader with appropriate visual styling for the content type.

Danger

This is a danger message. It provides important information to the reader with appropriate visual styling for the content type.

hybrid

Recommended - Gradient background with left accent + solid icon badge

Note

This is a note message. It provides important information to the reader with appropriate visual styling for the content type.

Tip

This is a tip message. It provides important information to the reader with appropriate visual styling for the content type.

Caution

This is a caution message. It provides important information to the reader with appropriate visual styling for the content type.

Danger

This is a danger message. It provides important information to the reader with appropriate visual styling for the content type.