Pokemon/Trading Card Game inspired design exploration for Bengal documentation
Spherical resource indicators inspired by Pokemon TCG energy cards. Pulse animation on hover.
Rainbow prismatic shimmer effect that activates on hover. Uses mix-blend-mode: color-dodge for authentic foil look.
Holographic Note
Hover over this card to see the rainbow foil shimmer effect! The diagonal shine sweeps across like a real holographic card.
Holographic Tip
This effect works great for highlighting special or premium content. The shine animation creates that satisfying TCG card tilt moment.
Visual escalation from Common → Legendary with increasing effects.
Common
Basic styling with minimal effects. Clean and simple.
Uncommon
Green accent with subtle glow. A step up from common.
Rare
Blue glow with shimmer animation. Getting fancy!
Ultra Rare
Purple glow with rainbow overlay. For important callouts.
Legendary
Gold frame with full holographic effect and intense glow. Maximum impact for critical information!
Full trading card inspired design with colored header banner.
Note Card
This style mimics a trading card with a colored header bar and metallic frame border.
Tip Card
Green variant for tips and success messages. The gradient header adds depth.
Warning Card
Orange/amber header for warnings. The card frame draws attention.
Danger Card
Red variant for critical errors. High visibility for important warnings.
Complete card design featuring energy orb icons instead of emoji.
Information
Water energy orb for info/note cards. The spherical icon adds that collectible card feel.
Pro Tip
Grass energy for tips and best practices. Matches the nature/growth theme of tips.
Caution
Fire energy for warnings. The warm glow draws attention to potential issues.
Critical
Psychic energy for dangers/errors. The mysterious purple conveys severity.
Example
Electric energy for examples. Bright and energetic for code examples!
Mix and match classes for maximum impact.
Ultimate Legendary Card
This combines holographic foil, legendary rarity, and TCG styling. Maximum "wow" factor for your most important documentation callouts! Hover to see all effects.
⚠️ Breaking Change
Perfect for documenting breaking changes or critical migrations. The purple ultra-rare glow commands attention.
Add these classes to your admonitions:
<!-- Holographic foil effect -->
<div class="admonition holo-foil note">...</div>
<!-- Rarity tiers -->
<div class="admonition rarity-common note">...</div>
<div class="admonition rarity-uncommon tip">...</div>
<div class="admonition rarity-rare info">...</div>
<div class="admonition rarity-ultra-rare warning">...</div>
<div class="admonition rarity-legendary danger">...</div>
<!-- TCG card frame -->
<div class="admonition tcg-card note">...</div>
<!-- Full TCG with energy orbs -->
<div class="admonition tcg-full note">...</div>
<!-- Combine effects -->
<div class="admonition holo-foil rarity-legendary tcg-full tip">...</div>
<!-- Energy orb icons -->
<div class="energy-orb fire">🔥</div>
<div class="energy-orb water">💧</div>