Documentation-style callouts with left border accent for tips, notes, warnings in content areas.

Basic Callouts

Primary Callout - Use this for highlighting important information related to the main topic.
Secondary Callout - Use this for supplementary or less critical information.
Success Callout - Use this to highlight successful outcomes or positive tips.
Danger Callout - Use this to warn about critical issues or destructive actions.
Warning Callout - Use this to caution users about potential problems or deprecated features.
Info Callout - Use this for helpful tips, hints, or additional context.

Callouts with Headings

Note

This is an informational callout with a heading. Use headings to make important callouts more scannable.

Deprecation Warning

This API endpoint will be removed in version 3.0. Please migrate to the new endpoint.

Breaking Change

The response format has changed. See the migration guide for details on updating your integration.

Best Practice

Always validate user input before processing. This prevents security vulnerabilities and improves reliability.

Callouts with Icons

i
Pro Tip: You can use keyboard shortcuts to speed up your workflow. Press Ctrl+K to open the command palette.
!
Caution: Make sure to backup your data before proceeding with this operation.
x
Critical: This action cannot be undone. All associated data will be permanently deleted.
v
Verified: This component has been tested and approved for production use.

Callouts with Lists

Prerequisites

Before you begin, make sure you have:

  • Node.js 18 or higher installed
  • npm or yarn package manager
  • A code editor (VS Code recommended)
  • Basic knowledge of JavaScript
Known Limitations

Please be aware of these current limitations:

  1. Maximum file size is 10MB
  2. Concurrent uploads limited to 5
  3. Some formats not yet supported
  4. Mobile optimization in progress

Theme Color Callouts

Color 1 - Theme color slot 1 callout.
Color 2 - Theme color slot 2 callout.
Color 3 - Theme color slot 3 callout.
Color 4 - Theme color slot 4 callout.
Color 5 - Theme color slot 5 callout.
Color 6 - Theme color slot 6 callout.
Color 7 - Theme color slot 7 callout.
Color 8 - Theme color slot 8 callout.
Color 9 - Theme color slot 9 callout.

Callout Sizes

Small Callout - Compact size for inline tips or short notes.
Default Callout - Standard size suitable for most use cases.
Large Callout - Use this for prominent callouts that need extra emphasis and breathing room.

Callouts with Code

Quick Start

Install the package using npm:

npm install @keenmate/pure-admin-core

Then import the styles in your SCSS:

@import '@keenmate/pure-admin-core/src/scss/main';

Migration Note

If upgrading from v0.x, replace pa-alert--callout with the new pa-callout class. The old class is deprecated and will be removed in v2.0.

Callouts with Links

Learn More

For detailed documentation on all available components, visit the Buttons and Cards documentation.

Need help? Check out our Dashboard or join the community for support.

Callouts in Grid Layout

Tip: Use keyboard shortcuts for faster navigation.
Note: This feature requires admin privileges.
Alert: Scheduled maintenance tonight.

Callouts vs Alerts

Callout

Documentation-style, left border accent, for static content

Callouts are best for documentation, tips, and static informational content that doesn't require user action.

Alert

Full background, dismissible, for dynamic feedback

© 2026 KeenMate
v1.0.0-rc.2

John Doe

Administrator
  • Dashboard
  • Forms

Settings

Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.