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

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 Components Overview page. You can also check out the Buttons and Cards documentation.

Need help? Check out our Getting Started Guide or join the Community Discord 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

Alerts are best for dynamic feedback, notifications, and messages that may require user action or dismissal.

CSS Classes Reference

Callout Base & Variants

  • pa-callout - Base callout with left border accent
  • pa-callout--primary - Primary/accent color
  • pa-callout--secondary - Secondary/muted color
  • pa-callout--success - Success (green)
  • pa-callout--danger - Danger (red)
  • pa-callout--warning - Warning (yellow/orange)
  • pa-callout--info - Information (blue)

Callout Sizes

  • pa-callout--sm - Small (compact padding, smaller text)
  • pa-callout - Default size
  • pa-callout--lg - Large (more padding, larger text)

Callout Sub-elements

  • pa-callout__icon - Floated icon (left side)
  • pa-callout__heading - Callout title/heading
  • pa-callout__content - Content wrapper (with clearfix for icon)
Type to search or use /p for products, /o for orders, /u for users, /i for invoices
↑↓ Navigate
←→ Pages
↵ Select
Esc Close

Settings

👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
  • 📊 Data Grid