Card Components

Basic Glass Card

Card Title

This is a basic glass card with semi-transparent background and backdrop blur effect. Perfect for general content.

<div class="glass-card">
    <h3>Card Title</h3>
    <p>Card content goes here</p>
    <button class="btn btn-primary">Action</button>
</div>

Deity Card

🔱

Poseidon

God of the Seas

Ruler of all waters, earthquakes, and horses. Commands the tides and storms with his mighty trident.

Water Storms Earthquakes

⚡

Zeus

King of the Gods

Supreme deity of Olympus, wielder of lightning, and master of the sky and thunder.

Sky Thunder Justice

<div class="deity-card">
    <div class="deity-icon">🔱</div>
    <h3>Deity Name</h3>
    <p class="deity-title">God of Something</p>
    <p>Description</p>
    <div class="deity-domains">
        <span class="tag">Domain 1</span>
        <span class="tag">Domain 2</span>
    </div>
</div>

Section Card

Important Section

New

Section cards provide a strong visual container for important content blocks with header badges.

List item one
List item two
List item three

<div class="section-card">
    <div class="section-header">
        <h3>Section Title</h3>
        <span class="section-badge">Badge</span>
    </div>
    <p>Content</p>
</div>

Feature Card

📚

Comprehensive Lore

Deep dive into mythological narratives and interconnected stories.

🌟

Interactive Themes

Switch between elemental and cosmic visual themes.

🔍

Advanced Search

Find deities, events, and connections quickly.

<div class="feature-card">
    <div class="feature-icon">📚</div>
    <h4>Feature Title</h4>
    <p>Feature description</p>
</div>

Card with Image

Image Placeholder

Card with Visual

Combine imagery with text for impactful storytelling. Images enhance engagement and provide visual context.

<div class="image-card">
    <img src="image.jpg" alt="Description">
    <div class="image-card-content">
        <h3>Card Title</h3>
        <p>Content</p>
        <button class="btn btn-secondary">Action</button>
    </div>
</div>