Callout - ANTSAND Styles

Basic Callout

Default callout with subtle gray styling.

Note: This is a basic callout box for general notes or side information.

<div class="antsand-callout">
    <strong>Note:</strong> This is a basic callout box.
</div>

Callout Variants

Colored variants for different types of information.

💡 Info: This is an informational callout using the primary color scheme. Perfect for tips and helpful information.

⚠️ Warning: This is a warning callout for important cautions or things to be aware of.

📚 Sources: Use this variant to cite research sources, references, or bibliographic information in articles.

<!-- Info callout -->
<div class="antsand-callout antsand-callout-info">
    <strong>💡 Info:</strong> Helpful information...
</div>

<!-- Warning callout -->
<div class="antsand-callout antsand-callout-warning">
    <strong>⚠️ Warning:</strong> Important notice...
</div>

<!-- Sources/References callout -->
<div class="antsand-callout antsand-callout-sources">
    <strong>📚 Sources:</strong> References...
</div>

Usage in Articles

Callouts are designed to work seamlessly within article containers.

<div class="antsand-article">
    <h1>Research on CSS Frameworks</h1>

    <p>CSS frameworks have evolved significantly...</p>

    <div class="antsand-callout antsand-callout-info">
        <strong>💡 Did you know?</strong> ANTSAND follows the
        Bootstrap philosophy of semantic components rather than
        utility-first approaches like Tailwind.
    </div>

    <h2>Methodology</h2>
    <p>Our research methodology involved...</p>

    <div class="antsand-callout antsand-callout-sources">
        <strong>📚 Sources:</strong>
        <ul>
            <li>Smith, J. (2024). CSS Architecture Patterns</li>
            <li>Jones, A. (2023). Modern Web Design</li>
        </ul>
    </div>
</div>

Callouts with Rich Content

Callouts can contain paragraphs, lists, links, and other HTML elements.

Key Takeaways:

ANTSAND uses semantic class names
No !important - proper cascade management
Components inherit Bootstrap philosophy

Learn more in the CSS Specificity Philosophy.

<div class="antsand-callout antsand-callout-info">
    <strong>Key Takeaways:</strong>
    <ul>
        <li>Point one</li>
        <li>Point two</li>
    </ul>
    <p>Additional context or links...</p>
</div>

Available Classes

antsand-callout - Base callout container (gray)
antsand-callout-info - Info variant (blue, primary color)
antsand-callout-warning - Warning variant (yellow/amber)
antsand-callout-sources - Sources/references variant (same as warning)

Design Features

Left Border: 4px solid colored border for visual distinction
Background: Light tinted background matching the border color
Spacing: Comfortable padding and vertical margins
Last Child: Automatic removal of bottom margin on last element
Responsive: Works across all screen sizes
Nested Content: Supports paragraphs, lists, links, code, etc.

Best Practices

💡 Tips for Using Callouts:

Be Strategic: Don't overuse callouts - they lose impact if everything is highlighted
Use Variants Meaningfully: Match the variant to the content type (info for tips, warning for cautions, sources for references)
Add Icons/Emoji: Visual indicators help readers quickly identify callout types
Keep Content Concise: Callouts should highlight key points, not contain lengthy explanations
Pair with Articles: Callouts are designed to work within article containers for optimal styling