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

Interactive Demos

Explore PM7 Callout component features with these interactive examples:

Installation

npm install @pm7/core

CSS Classes

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: