Documentation-style callouts with left border accent for tips, notes, warnings in content areas.
Basic Callouts
Callouts with Headings
This is an informational callout with a heading. Use headings to make important callouts more scannable.
This API endpoint will be removed in version 3.0. Please migrate to the new endpoint.
The response format has changed. See the migration guide for details on updating your integration.
Always validate user input before processing. This prevents security vulnerabilities and improves reliability.
Callouts with Icons
Ctrl+K to open the command palette.Callouts with Lists
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
Please be aware of these current limitations:
- Maximum file size is 10MB
- Concurrent uploads limited to 5
- Some formats not yet supported
- Mobile optimization in progress
Callout Sizes
Callouts with Code
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';
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
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
Callouts vs Alerts
Callout
Documentation-style, left border accent, for static content
Alert
Full background, dismissible, for dynamic feedback
Theme Color Slot Callouts
Callouts using custom theme color slots (1-9). Colors are defined by the active theme.
Code Examples
Basic Usage
With Heading & Icon
Available Props