Foundation Panels

Foundation panels (Card/Callout) are container components used to organize and display content. This chapter will introduce various uses of Foundation panels.

Basic Card

Use the .card class to create a basic card:

<div class="card">
    <div class="card-section">
        <h4>This is a Card</h4>
        <p>Cards are container components used to organize content.</p>
    </div>
</div>

Card Structure

A complete Card includes the following parts:

<div class="card">
    <!-- Image Area -->
    <img src="image.jpg" alt="Image Description">

    <!-- Divider -->
    <div class="card-divider">
        <h4>Title Area</h4>
    </div>

    <!-- Content Area -->
    <div class="card-section">
        <p>This is the main content area of the card.</p>
    </div>
</div>

Card Divider

card-divider is used to create a titled area with background:

<div class="card">
    <div class="card-divider">
        <h4>News Title</h4>
    </div>
    <div class="card-section">
        <p>This is the body content of the news...</p>
    </div>
</div>

Card Section

card-section is the content area of the card:

<div class="card">
    <div class="card-section">
        <h4>Product Name</h4>
        <p>Product description information...</p>
        <a class="button" href="#">Learn More</a>
    </div>
</div>

Card with Images

Top Image

<div class="card">
    <img src="https://via.placeholder.com/400x200" alt="Example Image">
    <div class="card-section">
        <h4>Card Title</h4>
        <p>This is a card with a top image.</p>
    </div>
</div>

Bottom Image

<div class="card">
    <div class="card-section">
        <h4>Card Title</h4>
        <p>This is a card with a bottom image.</p>
    </div>
    <img src="https://via.placeholder.com/400x200" alt="Example Image">
</div>

Card Grid Layout

Use the grid system to create card layouts:

<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="Image 1">
            <div class="card-section">
                <h4>Card 1</h4>
                <p>Card content description...</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="Image 2">
            <div class="card-section">
                <h4>Card 2</h4>
                <p>Card content description...</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card">
            <img src="https://via.placeholder.com/400x200" alt="Image 3">
            <div class="card-section">
                <h4>Card 3</h4>
                <p>Card content description...</p>
            </div>
        </div>
    </div>
</div>

Custom Card Styles

Card with Shadow

<style>
    .card.shadow {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }
    .card.shadow:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
</style>

<div class="card shadow">
    <div class="card-section">
        <h4>Card with Shadow</h4>
        <p>The shadow deepens on hover.</p>
    </div>
</div>

Colored Border Card

<style>
    .card.bordered-primary { border-left: 4px solid #1779ba; }
    .card.bordered-success { border-left: 4px solid #3adb76; }
    .card.bordered-warning { border-left: 4px solid #ffae00; }
    .card.bordered-alert { border-left: 4px solid #cc4b37; }
</style>

<div class="card bordered-primary">
    <div class="card-section">
        <h4>Primary Border</h4>
        <p>Card with primary color border.</p>
    </div>
</div>

Background Color Card

<style>
    .card.bg-primary {
        background: #1779ba;
        color: white;
    }
    .card.bg-success {
        background: #3adb76;
        color: white;
    }
</style>

<div class="card bg-primary">
    <div class="card-section">
        <h4>Blue Background Card</h4>
        <p>Card with colored background.</p>
    </div>
</div>

Product Card Example

<div class="card" style="max-width: 300px;">
    <img src="https://via.placeholder.com/300x200" alt="Product Image">
    <div class="card-section">
        <p class="label success">Hot</p>
        <h4>iPhone 15 Pro</h4>
        <p class="text-muted">Latest smartphone</p>
        <p class="h5" style="color: #cc4b37;">$7999</p>
        <a class="button expanded" href="#">Buy Now</a>
    </div>
</div>

User Card Example

<div class="card text-center" style="max-width: 250px;">
    <div class="card-section">
        <img src="https://via.placeholder.com/100" alt="User Avatar"
             style="border-radius: 50%; width: 100px; height: 100px;">
        <h4 style="margin-top: 15px;">John Doe</h4>
        <p class="text-muted">Frontend Developer</p>
        <div class="button-group small">
            <a class="button hollow" href="#">Follow</a>
            <a class="button hollow" href="#">Message</a>
        </div>
    </div>
</div>

Blog Card Example

<div class="card">
    <img src="https://via.placeholder.com/400x200" alt="Article Image">
    <div class="card-divider">
        <span class="label">Tech</span>
        <small class="float-right">2024-01-15</small>
    </div>
    <div class="card-section">
        <h4><a href="#">How to Build Responsive Websites with Foundation</a></h4>
        <p>Foundation is a powerful responsive frontend framework. This article will introduce how to use it...</p>
        <div class="grid-x align-middle">
            <div class="cell shrink">
                <img src="https://via.placeholder.com/40" alt="Author"
                     style="border-radius: 50%; width: 40px;">
            </div>
            <div class="cell auto" style="padding-left: 10px;">
                <strong>Author Name</strong>
            </div>
            <div class="cell shrink">
                <a href="#">Read More &raquo;</a>
            </div>
        </div>
    </div>
</div>

Stat Cards

<div class="grid-x grid-margin-x small-up-2 medium-up-4">
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #1779ba;">1,234</h2>
                <p>Total Users</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #3adb76;">567</h2>
                <p>Today's Visits</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #ffae00;">89</h2>
                <p>Pending Orders</p>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-section">
                <h2 style="color: #cc4b37;">12</h2>
                <p>Issues Reported</p>
            </div>
        </div>
    </div>
</div>

Pricing Cards

<div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>Basic</h4>
            </div>
            <div class="card-section">
                <h3>$29<small>/mo</small></h3>
                <ul class="no-bullet">
                    <li>5GB Storage</li>
                    <li>100 Users</li>
                    <li>Email Support</li>
                </ul>
                <a class="button hollow" href="#">Select</a>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center" style="border: 2px solid #1779ba;">
            <div class="card-divider" style="background: #1779ba; color: white;">
                <h4>Pro <span class="label">Recommended</span></h4>
            </div>
            <div class="card-section">
                <h3>$99<small>/mo</small></h3>
                <ul class="no-bullet">
                    <li>50GB Storage</li>
                    <li>1000 Users</li>
                    <li>Phone Support</li>
                    <li>API Access</li>
                </ul>
                <a class="button" href="#">Select</a>
            </div>
        </div>
    </div>
    <div class="cell">
        <div class="card text-center">
            <div class="card-divider">
                <h4>Enterprise</h4>
            </div>
            <div class="card-section">
                <h3>$299<small>/mo</small></h3>
                <ul class="no-bullet">
                    <li>Unlimited Storage</li>
                    <li>Unlimited Users</li>
                    <li>Dedicated Support</li>
                    <li>Custom Features</li>
                </ul>
                <a class="button hollow" href="#">Select</a>
            </div>
        </div>
    </div>
</div>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Panels Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
        }
        .demo-section h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .card.shadow {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }
        .card.shadow:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .card.bordered-primary { border-left: 4px solid #1779ba; }
        .card.bordered-success { border-left: 4px solid #3adb76; }
        .card.bordered-warning { border-left: 4px solid #ffae00; }
        .card.bordered-alert { border-left: 4px solid #cc4b37; }

        .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Panels Showcase</h1>

        <div class="demo-section">
            <h3>Basic Card</h3>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <div class="card">
                        <div class="card-divider">
                            <h4>Card Title</h4>
                        </div>
                        <div class="card-section">
                            <p>This is a basic Card component with title and content areas.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="card">
                        <img src="https://via.placeholder.com/400x150" alt="Example Image">
                        <div class="card-section">
                            <h4>Card with Image</h4>
                            <p>This Card includes a top image.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4">
                    <div class="card shadow">
                        <div class="card-section">
                            <h4>Card with Shadow</h4>
                            <p>The shadow deepens on hover for better interactivity.</p>
                            <a class="button small" href="#">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Colored Border Card</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card bordered-primary">
                        <div class="card-section">
                            <h5>Primary</h5>
                            <p>Primary information</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-success">
                        <div class="card-section">
                            <h5>Success</h5>
                            <p>Success information</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-warning">
                        <div class="card-section">
                            <h5>Warning</h5>
                            <p>Warning information</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card bordered-alert">
                        <div class="card-section">
                            <h5>Alert</h5>
                            <p>Error information</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Stat Cards</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #1779ba;">1,234</div>
                            <p>Total Users</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #3adb76;">567</div>
                            <p>Today's Visits</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #ffae00;">89</div>
                            <p>Pending Orders</p>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center">
                        <div class="card-section">
                            <div class="stat-value" style="color: #cc4b37;">12</div>
                            <p>Issues Reported</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>Product Cards</h3>
            <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-4">
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="Product">
                        <div class="card-section">
                            <span class="label success">Hot</span>
                            <h5>Product Name</h5>
                            <p class="text-muted">Short product description</p>
                            <p style="color: #cc4b37; font-weight: bold;">$199.00</p>
                            <a class="button small expanded" href="#">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="Product">
                        <div class="card-section">
                            <span class="label warning">New</span>
                            <h5>Product Name</h5>
                            <p class="text-muted">Short product description</p>
                            <p style="color: #cc4b37; font-weight: bold;">$299.00</p>
                            <a class="button small expanded" href="#">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="Product">
                        <div class="card-section">
                            <h5>Product Name</h5>
                            <p class="text-muted">Short product description</p>
                            <p style="color: #cc4b37; font-weight: bold;">$399.00</p>
                            <a class="button small expanded" href="#">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card shadow">
                        <img src="https://via.placeholder.com/300x200" alt="Product">
                        <div class="card-section">
                            <span class="label alert">Sale</span>
                            <h5>Product Name</h5>
                            <p class="text-muted">Short product description</p>
                            <p>
                                <del style="color: #999;">$599.00</del>
                                <span style="color: #cc4b37; font-weight: bold;">$499.00</span>
                            </p>
                            <a class="button small expanded" href="#">Add to Cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>User Cards</h3>
            <div class="grid-x grid-margin-x small-up-2 medium-up-4">
                <div class="cell">
                    <div class="card text-center shadow">
                        <div class="card-section">
                            <img src="https://via.placeholder.com/80" alt="User Avatar"
                                 style="border-radius: 50%; width: 80px; height: 80px;">
                            <h5 style="margin-top: 10px;">John</h5>
                            <p class="text-muted">Frontend Dev</p>
                            <div class="button-group tiny">
                                <a class="button hollow" href="#">Follow</a>
                                <a class="button hollow" href="#">Message</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="card text-center shadow">
                        <div class="card-section">
                            <img src="https://via.placeholder.com/80" alt="User Avatar"
                                 style="border-radius: 50%; width: 80px; height: 80px;">
                            <h5 style="margin-top: 10px;">Jane</h5>
                            <p class="text-muted">UI Designer</p>
                            <div class="button-group tiny">
                                <a class="button hollow" href="#">Follow</a>
                                <a class="button hollow" href="#">Message</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Panel Best Practices

1. Consistency: Keep card styles consistent on the same page
2. Visual Hierarchy: Use shadows and borders to create visual hierarchy
3. Responsiveness: Ensure cards display well on different screen sizes
4. Content Organization: Use card-divider and card-section to organize content
5. Interaction Feedback: Add hover effects for clickable cards

Summary

In this chapter, we learned:

• Basic structure of Card components
• Different Card styles (shadow, border, background)
• Card grid layouts
• Various practical Card examples (products, users, stats, pricing)

Next chapter, we will learn Foundation Images.

---

Tip: Cards are commonly used components in modern web design. Using them wisely can make your pages cleaner and more organized.