<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VMK UI Kit — Figma Breadcrumbs Match</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<style>
html, body { padding: 0; margin: 0; background: #000000; }
#figma-breadcrumbs {
width: 1200px;
height: 567px;
padding: 47px 50px 0;
box-sizing: border-box;
overflow: hidden;
background: #000000;
}
.figma-row {
display: flex;
justify-content: space-between;
align-items: center;
height: 83px;
margin-bottom: 48px;
}
.figma-row:last-child { margin-bottom: 0; }
</style>
</head>
<body>
<div id="figma-breadcrumbs">
<div class="figma-row">
<nav aria-label="Breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
<nav aria-label="Collapsed breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
</div>
<div class="figma-row">
<nav aria-label="Breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
<nav aria-label="Collapsed breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
</div>
<div class="figma-row">
<nav aria-label="Breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
<nav aria-label="Collapsed breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
</div>
<div class="figma-row">
<nav aria-label="Breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item"><a href="#">Label</a></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
<nav aria-label="Collapsed breadcrumb">
<ol class="breadcrumb breadcrumb-inverted">
<li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
<li class="breadcrumb-separator" aria-hidden="true">/</li>
<li class="breadcrumb-item is-active"><span>Label</span></li>
</ol>
</nav>
</div>
</div>
</body>
</html>
