Learn FOUNDATION with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Foundation Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Counter</title>
</head>
<body>
    <div class="grid-container text-center" id="container">
        <h2>Counter: <span id="count">0</span></h2>
        <div class="button-group">
        <button id="increment" class="button">+</button>
        <button id="decrement" class="button alert">-</button>
        <button id="reset" class="button secondary">Reset</button>
        </div>
        <button id="theme-btn" class="button warning">Switch Theme</button>
    </div>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const container = document.getElementById('container');
        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        container.classList.toggle('dark-theme', isDark);
        container.classList.toggle('text-white', isDark);
        container.classList.toggle('light-theme', !isDark);
        container.classList.toggle('text-black', !isDark);
        };
    </script>

    <style>
        .dark-theme { background-color: #222; color: #eee; }
        .light-theme { background-color: #fff; color: #000; }
    </style>
</body>
</html>

Demonstrates a simple counter layout using Foundation classes and minimal JavaScript for interactivity.

Let’s Try →

Foundation Callout Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Callout</title>
</head>
<body>
    <div class="grid-container">
        <div class="callout primary">
        <h5>Primary Callout</h5>
        <p>This is an example of a Foundation callout box.</p>
        <button class="close-button" aria-label="Dismiss" type="button">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
    <script>
        document.querySelectorAll('.close-button').forEach(btn => {
        btn.onclick = () => btn.parentElement.remove();
        });
    </script>
</body>
</html>

Shows a Foundation callout box for notifications or important messages.

Let’s Try →

Foundation Top Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Top Bar</title>
</head>
<body>
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar" id="main-menu">
        <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

Demonstrates a responsive top navigation bar using Foundation Top Bar classes.

Let’s Try →

Foundation Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Card</title>
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
        <div class="cell small-12 medium-6 large-4">
        <div class="card">
        <img src="https://via.placeholder.com/300" alt="Placeholder">
        <div class="card-section">
        <h4>Card Title</h4>
        <p>Example of a card using Foundation.</p>
        </div>
        </div>
        </div>
        </div>
    </div>
</body>
</html>

Shows a simple card layout using Foundation's card component classes.

Let’s Try →

Foundation Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Accordion</title>
</head>
<body>
    <div class="grid-container">
        <ul class="accordion" data-accordion>
        <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Section 1</a>
        <div class="accordion-content" data-tab-content>
        <p>Content for Section 1</p>
        </div>
        </li>
        <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Section 2</a>
        <div class="accordion-content" data-tab-content>
        <p>Content for Section 2</p>
        </div>
        </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Demonstrates an accordion component for collapsible sections.

Let’s Try →

Foundation Reveal Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Modal</title>
</head>
<body>
    <div class="grid-container text-center">
        <button class="button" data-open="exampleModal1">Open Modal</button>
        <div class="reveal" id="exampleModal1" data-reveal>
        <h1>Modal Title</h1>
        <p>This is a Foundation Reveal modal example.</p>
        <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Shows how to create a modal dialog using Foundation's Reveal component.

Let’s Try →

Foundation Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Tabs</title>
</head>
<body>
    <div class="grid-container">
        <ul class="tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1"><p>Content for Tab 1</p></div>
        <div class="tabs-panel" id="panel2"><p>Content for Tab 2</p></div>
        <div class="tabs-panel" id="panel3"><p>Content for Tab 3</p></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Demonstrates a tabbed interface using Foundation Tabs component.

Let’s Try →

Foundation Form Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Form</title>
</head>
<body>
    <div class="grid-container">
        <form>
        <div class="grid-x grid-padding-x">
        <div class="cell small-12">
        <label>Name
        <input type="text" placeholder="Your Name">
        </label>
        </div>
        <div class="cell small-12">
        <label>Email
        <input type="email" placeholder="Your Email">
        </label>
        </div>
        <div class="cell small-12">
        <button class="button">Submit</button>
        </div>
        </div>
        </form>
    </div>
</body>
</html>

Shows a simple form layout using Foundation form classes.

Let’s Try →

Foundation Table Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Table</title>
</head>
<body>
    <div class="grid-container">
        <table class="hover stack">
        <thead>
        <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
        </tr>
        <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>User</td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

Demonstrates a responsive table using Foundation table classes.

Let’s Try →

Code Sample Descriptions

Foundation Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Counter</title>
</head>
<body>
    <div class="grid-container text-center" id="container">
        <h2>Counter: <span id="count">0</span></h2>
        <div class="button-group">
        <button id="increment" class="button">+</button>
        <button id="decrement" class="button alert">-</button>
        <button id="reset" class="button secondary">Reset</button>
        </div>
        <button id="theme-btn" class="button warning">Switch Theme</button>
    </div>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const container = document.getElementById('container');
        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        container.classList.toggle('dark-theme', isDark);
        container.classList.toggle('text-white', isDark);
        container.classList.toggle('light-theme', !isDark);
        container.classList.toggle('text-black', !isDark);
        };
    </script>

    <style>
        .dark-theme { background-color: #222; color: #eee; }
        .light-theme { background-color: #fff; color: #000; }
    </style>
</body>
</html>

Demonstrates a simple counter layout using Foundation classes and minimal JavaScript for interactivity.

Let’s Try →

Foundation Callout Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Callout</title>
</head>
<body>
    <div class="grid-container">
        <div class="callout primary">
        <h5>Primary Callout</h5>
        <p>This is an example of a Foundation callout box.</p>
        <button class="close-button" aria-label="Dismiss" type="button">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
    <script>
        document.querySelectorAll('.close-button').forEach(btn => {
        btn.onclick = () => btn.parentElement.remove();
        });
    </script>
</body>
</html>

Shows a Foundation callout box for notifications or important messages.

Let’s Try →

Foundation Top Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Top Bar</title>
</head>
<body>
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar" id="main-menu">
        <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

Demonstrates a responsive top navigation bar using Foundation Top Bar classes.

Let’s Try →

Foundation Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Card</title>
</head>
<body>
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
        <div class="cell small-12 medium-6 large-4">
        <div class="card">
        <img src="https://via.placeholder.com/300" alt="Placeholder">
        <div class="card-section">
        <h4>Card Title</h4>
        <p>Example of a card using Foundation.</p>
        </div>
        </div>
        </div>
        </div>
    </div>
</body>
</html>

Shows a simple card layout using Foundation's card component classes.

Let’s Try →

Foundation Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Accordion</title>
</head>
<body>
    <div class="grid-container">
        <ul class="accordion" data-accordion>
        <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Section 1</a>
        <div class="accordion-content" data-tab-content>
        <p>Content for Section 1</p>
        </div>
        </li>
        <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Section 2</a>
        <div class="accordion-content" data-tab-content>
        <p>Content for Section 2</p>
        </div>
        </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Demonstrates an accordion component for collapsible sections.

Let’s Try →

Foundation Reveal Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Modal</title>
</head>
<body>
    <div class="grid-container text-center">
        <button class="button" data-open="exampleModal1">Open Modal</button>
        <div class="reveal" id="exampleModal1" data-reveal>
        <h1>Modal Title</h1>
        <p>This is a Foundation Reveal modal example.</p>
        <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Shows how to create a modal dialog using Foundation's Reveal component.

Let’s Try →

Foundation Tabs Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Tabs</title>
</head>
<body>
    <div class="grid-container">
        <ul class="tabs" data-tabs id="example-tabs">
        <li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1"><p>Content for Tab 1</p></div>
        <div class="tabs-panel" id="panel2"><p>Content for Tab 2</p></div>
        <div class="tabs-panel" id="panel3"><p>Content for Tab 3</p></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Demonstrates a tabbed interface using Foundation Tabs component.

Let’s Try →

Foundation Form Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Form</title>
</head>
<body>
    <div class="grid-container">
        <form>
        <div class="grid-x grid-padding-x">
        <div class="cell small-12">
        <label>Name
        <input type="text" placeholder="Your Name">
        </label>
        </div>
        <div class="cell small-12">
        <label>Email
        <input type="email" placeholder="Your Email">
        </label>
        </div>
        <div class="cell small-12">
        <button class="button">Submit</button>
        </div>
        </div>
        </form>
    </div>
</body>
</html>

Shows a simple form layout using Foundation form classes.

Let’s Try →

Foundation Table Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <title>Foundation Table</title>
</head>
<body>
    <div class="grid-container">
        <table class="hover stack">
        <thead>
        <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
        </tr>
        <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>User</td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

Demonstrates a responsive table using Foundation table classes.

Let’s Try →