Learn Metro4 - 9 Code Examples & CST Typing Practice Test

Metro 4 UI is a front-end framework for building responsive, modern web applications with a clean, Windows Metro-inspired design. It provides prebuilt components, responsive grids, and integrated JavaScript widgets.

View all 9 Metro4 code examples →

Metro 4 Counter Example Metro 4 Navbar Example Metro 4 Card Example Metro 4 Modal Example Metro 4 Tabs Example Metro 4 Accordion Example Metro 4 Slideshow Example Metro 4 Tooltip Example Metro 4 Progress Bar Example

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 →

Frequently Asked Questions about Metro4

What is Metro4?

What are the primary use cases for Metro4?

Corporate dashboards and web apps. Data-heavy admin panels. Prototyping web applications quickly. Design systems and reusable UI kits. Responsive web applications with rich interactivity

What are the strengths of Metro4?

Structured, visually clean Metro-style UI. Wide range of components and JS widgets. Responsive design with grid system. Customizable themes and color schemes. Good for dashboards and enterprise apps

What are the limitations of Metro4?

Smaller community compared to Bootstrap or Semantic UI. Less frequent updates. Not utility-first, more component-driven. Bundle can be heavy if unused components are included. Learning curve for custom JS widgets and Metro conventions

How can I practice Metro4 typing speed?

CodeSpeedTest offers 9+ real Metro4 code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

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 →

Frequently Asked Questions about Metro4

What is Metro4?

What are the primary use cases for Metro4?

Corporate dashboards and web apps. Data-heavy admin panels. Prototyping web applications quickly. Design systems and reusable UI kits. Responsive web applications with rich interactivity

What are the strengths of Metro4?

Structured, visually clean Metro-style UI. Wide range of components and JS widgets. Responsive design with grid system. Customizable themes and color schemes. Good for dashboards and enterprise apps

What are the limitations of Metro4?

How can I practice Metro4 typing speed?

CodeSpeedTest offers 9+ real Metro4 code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.