Learn METRO4 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

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Counter</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <h2>Counter: <span id="count">0</span></h2>
    <div class="m4-btn-group">
        <button id="increment" class="m4-btn m4-primary">+</button>
        <button id="decrement" class="m4-btn m4-danger">-</button>
        <button id="reset" class="m4-btn m4-secondary">Reset</button>
    </div>
    <br>
    <button id="theme-btn" class="m4-btn m4-warning">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        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;
        body.classList.toggle('m4-dark', isDark);
        body.classList.toggle('m4-light', !isDark);
        };
    </script>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

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

Let’s Try →

Metro 4 Navbar 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Navbar</title>
</head>
<body class="m4-container m4-margin-top">
    <nav class="m4-navbar m4-shadow">
        <div class="m4-navbar-brand">Logo</div>
        <ul class="m4-navbar-menu">
        <li class="m4-active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Demonstrates a responsive navbar using Metro 4 classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Card</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-card m4-shadow">
        <div class="m4-card-header">Card Title</div>
        <div class="m4-card-content">This is a Metro 4 card example.</div>
        <div class="m4-card-footer">
        <button class="m4-btn m4-primary">Action</button>
        </div>
    </div>
</body>
</html>

Shows a card layout using Metro 4 card classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Modal</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <button class="m4-btn m4-primary" onclick="Metro.dialog.open('#modal-example')">Open Modal</button>

    <div id="modal-example" class="m4-dialog m4-shadow" style="display:none;">
        <div class="m4-dialog-title">Modal Header</div>
        <div class="m4-dialog-content">This is a Metro 4 modal example.</div>
        <div class="m4-dialog-actions">
        <button class="m4-btn m4-default" onclick="Metro.dialog.close('#modal-example')">Close</button>
        </div>
    </div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates a modal popup using Metro 4 modal classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Tabs</title>
</head>
<body class="m4-container m4-margin-top">
    <ul class="m4-tabs" data-role="tabs">
        <li class="m4-active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">Content for Tab 1</div>
    <div id="tab2">Content for Tab 2</div>
    <div id="tab3">Content for Tab 3</div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a tabbed interface using Metro 4 tabs classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Accordion</title>
</head>
<body class="m4-container m4-margin-top">
    <ul class="m4-accordion" data-role="accordion">
        <li class="m4-open">
        <div class="m4-accordion-title">Section 1</div>
        <div class="m4-accordion-content">Content for section 1</div>
        </li>
        <li>
        <div class="m4-accordion-title">Section 2</div>
        <div class="m4-accordion-content">Content for section 2</div>
        </li>
    </ul>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates an accordion component using Metro 4 classes.

Let’s Try →

Metro 4 Slideshow 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Slideshow</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-slideshow" data-role="slideshow" data-height="300" data-auto-play="true">
        <img src="https://via.placeholder.com/600x300" alt="">
        <img src="https://via.placeholder.com/600x300" alt="">
        <img src="https://via.placeholder.com/600x300" alt="">
    </div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a responsive slideshow using Metro 4 slideshow classes.

Let’s Try →

Metro 4 Tooltip 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Tooltip</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <button class="m4-btn m4-primary" data-role="hint" data-hint="I am a tooltip">Hover Me</button>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates tooltips using Metro 4 tooltip classes.

Let’s Try →

Metro 4 Progress 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Progress Bar</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-progress" data-role="progress" data-value="50" data-max="100"></div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a simple progress bar using Metro 4 progress classes.

Let’s Try →

Code Sample Descriptions

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Counter</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <h2>Counter: <span id="count">0</span></h2>
    <div class="m4-btn-group">
        <button id="increment" class="m4-btn m4-primary">+</button>
        <button id="decrement" class="m4-btn m4-danger">-</button>
        <button id="reset" class="m4-btn m4-secondary">Reset</button>
    </div>
    <br>
    <button id="theme-btn" class="m4-btn m4-warning">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        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;
        body.classList.toggle('m4-dark', isDark);
        body.classList.toggle('m4-light', !isDark);
        };
    </script>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

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

Let’s Try →

Metro 4 Navbar 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Navbar</title>
</head>
<body class="m4-container m4-margin-top">
    <nav class="m4-navbar m4-shadow">
        <div class="m4-navbar-brand">Logo</div>
        <ul class="m4-navbar-menu">
        <li class="m4-active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Demonstrates a responsive navbar using Metro 4 classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Card</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-card m4-shadow">
        <div class="m4-card-header">Card Title</div>
        <div class="m4-card-content">This is a Metro 4 card example.</div>
        <div class="m4-card-footer">
        <button class="m4-btn m4-primary">Action</button>
        </div>
    </div>
</body>
</html>

Shows a card layout using Metro 4 card classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Modal</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <button class="m4-btn m4-primary" onclick="Metro.dialog.open('#modal-example')">Open Modal</button>

    <div id="modal-example" class="m4-dialog m4-shadow" style="display:none;">
        <div class="m4-dialog-title">Modal Header</div>
        <div class="m4-dialog-content">This is a Metro 4 modal example.</div>
        <div class="m4-dialog-actions">
        <button class="m4-btn m4-default" onclick="Metro.dialog.close('#modal-example')">Close</button>
        </div>
    </div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates a modal popup using Metro 4 modal classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Tabs</title>
</head>
<body class="m4-container m4-margin-top">
    <ul class="m4-tabs" data-role="tabs">
        <li class="m4-active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">Content for Tab 1</div>
    <div id="tab2">Content for Tab 2</div>
    <div id="tab3">Content for Tab 3</div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a tabbed interface using Metro 4 tabs classes.

Let’s Try →

Metro 4 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Accordion</title>
</head>
<body class="m4-container m4-margin-top">
    <ul class="m4-accordion" data-role="accordion">
        <li class="m4-open">
        <div class="m4-accordion-title">Section 1</div>
        <div class="m4-accordion-content">Content for section 1</div>
        </li>
        <li>
        <div class="m4-accordion-title">Section 2</div>
        <div class="m4-accordion-content">Content for section 2</div>
        </li>
    </ul>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates an accordion component using Metro 4 classes.

Let’s Try →

Metro 4 Slideshow 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Slideshow</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-slideshow" data-role="slideshow" data-height="300" data-auto-play="true">
        <img src="https://via.placeholder.com/600x300" alt="">
        <img src="https://via.placeholder.com/600x300" alt="">
        <img src="https://via.placeholder.com/600x300" alt="">
    </div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a responsive slideshow using Metro 4 slideshow classes.

Let’s Try →

Metro 4 Tooltip 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Tooltip</title>
</head>
<body class="m4-container m4-text-center m4-margin-top">
    <button class="m4-btn m4-primary" data-role="hint" data-hint="I am a tooltip">Hover Me</button>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Demonstrates tooltips using Metro 4 tooltip classes.

Let’s Try →

Metro 4 Progress 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.metroui.org.ua/v4/css/metro-all.min.css">
    <title>Metro 4 Progress Bar</title>
</head>
<body class="m4-container m4-margin-top">
    <div class="m4-progress" data-role="progress" data-value="50" data-max="100"></div>

    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

Shows a simple progress bar using Metro 4 progress classes.

Let’s Try →