Callout

Callouts are used to highlight important information, tips, warnings, or errors with a distinctive visual style.

When to use

To highlight important information or notices
To provide tips or best practices
To warn users about potential issues
To display error messages prominently
To separate supplementary content from main content

Key features

Six semantic variants for different message types
Support for headers and rich content
Three size options
Dark mode support with proper contrast
Optional animations and modifiers

Callout Variants

Information

This is an informational callout. Use it for general information or notices.

Success

Great! Your operation completed successfully.

Warning

Please review this information before proceeding. This action may have consequences.

Error

Something went wrong. Please check your input and try again.

💡 Pro Tip

Use callouts to draw attention to important information that might otherwise be overlooked.

Note

This is a neutral callout for general notes without specific semantic meaning.

Sizes

Small callout with less padding

Medium callout (default size)

Large callout with more padding and larger text

Complex Content

🚀 Getting Started with PM7

Follow these steps to integrate PM7 components:

Install the package: npm install @pm7/core
Import the CSS: import '@pm7/core/dist/pm7.css'
Start using components with simple CSS classes

For detailed instructions, check out our getting started guide.

Modifiers

No Border

This callout has no left border for a softer appearance.

Centered Content

This callout has centered text alignment.

⚠️ Attention Required

This callout pulses to grab attention for critical messages.

AI Agent Example

🤖 AI Tip

Tell your AI agent: "I'm using pm7-ui. Use CSS classes like pm7-button, pm7-card, etc."

Installation

npm install @pm7/core

CSS Classes

Class	Description
Base Classes
`.pm7-callout`	Base callout container (required)
`.pm7-callout-header`	Header/title element
`.pm7-callout-body`	Body content container
`.pm7-callout-icon`	Icon element styling
Variants
`.pm7-callout--info`	Info variant (blue)
`.pm7-callout--success`	Success variant (green)
`.pm7-callout--warning`	Warning variant (yellow)
`.pm7-callout--error`	Error/danger variant (red)
`.pm7-callout--danger`	Alias for error variant
`.pm7-callout--tip`	Tip variant (primary color)
`.pm7-callout--neutral`	Neutral variant (gray)
Sizes
`.pm7-callout--sm`	Small size
`.pm7-callout--lg`	Large size
Modifiers
`.pm7-callout--no-border`	Remove left border
`.pm7-callout--center`	Center align text
`.pm7-callout--pulse`	Add pulse animation

Data Attributes

Callouts do not use any special data attributes. They are purely CSS-based components that rely on class names for styling and structure.

Basic Usage

<div class="pm7-callout">
  <div class="pm7-callout-body">
    This is a basic callout with default styling.
  </div>
</div>

With Header

<div class="pm7-callout pm7-callout--info">
  <h4 class="pm7-callout-header">
    <svg class="pm7-callout-icon">...</svg>
    Information
  </h4>
  <div class="pm7-callout-body">
    This is an informational message.
  </div>
</div>

Variants

<!-- Info (blue) -->
<div class="pm7-callout pm7-callout--info">...</div>

<!-- Success (green) -->
<div class="pm7-callout pm7-callout--success">...</div>

<!-- Warning (yellow) -->
<div class="pm7-callout pm7-callout--warning">...</div>

<!-- Error/Danger (red) -->
<div class="pm7-callout pm7-callout--error">...</div>

<!-- Tip (primary color) -->
<div class="pm7-callout pm7-callout--tip">...</div>

<!-- Neutral (gray) -->
<div class="pm7-callout pm7-callout--neutral">...</div>

Sizes

<!-- Small -->
<div class="pm7-callout pm7-callout--info pm7-callout--sm">...</div>

<!-- Medium (default) -->
<div class="pm7-callout pm7-callout--info">...</div>

<!-- Large -->
<div class="pm7-callout pm7-callout--info pm7-callout--lg">...</div>

Modifiers

<!-- Remove left border -->
<div class="pm7-callout pm7-callout--info pm7-callout--no-border">...</div>

<!-- Center align text -->
<div class="pm7-callout pm7-callout--info pm7-callout--center">...</div>

<!-- Add pulse animation for critical messages -->
<div class="pm7-callout pm7-callout--warning pm7-callout--pulse">...</div>

PM7 Special Features

Auto Dark Mode - All variants adapt automatically to dark mode
Rich Content Support - Callouts can contain links, code blocks, lists, and multiple paragraphs
Flexible Structure - Use with or without headers, with or without icons
Semantic Variants - Six pre-styled variants for different message types
Pulse Animation - Optional attention-grabbing animation for critical messages

Accessibility

Use semantic HTML headings (<h4>, <h5>) for callout headers
Include descriptive text that doesn't rely solely on color to convey meaning
Icons should be decorative - the text should provide the actual meaning
Ensure links within callouts have sufficient contrast and underlines
For screen readers, consider adding role="alert" for critical warnings

Best Practices

Choose the appropriate variant for the message type (don't use success for errors)
Keep callout content concise and focused on a single message
Use headers to quickly summarize the callout's purpose
Reserve the pulse animation for truly critical messages that need immediate attention
Consider using smaller sizes for inline notifications within forms or lists
Don't overuse callouts - too many can reduce their effectiveness

Copy this link that can be used as documentation for working with this component:

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/packages/core/src/components/callout/README.md

🤖 AI-Optimized Documentation

This link contains complete Markdown documentation that is perfectly readable by AI assistants, developers, and other automated systems. Directly accessible on GitHub - including all essential PM7 Callout implementation guidance.

Perfect for ChatGPT, Claude, and other AI code assistants