<!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 Alert 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: #DDF3E4; }
#figma-alerts {
width: 1200px;
height: 1363px;
padding: 40px;
box-sizing: border-box;
overflow: hidden;
background: #DDF3E4;
}
.figma-row { margin-bottom: 24px; }
</style>
</head>
<body>
<div id="figma-alerts">
<div class="figma-row">
<div class="alert alert-success">
<i class="ph ph-check-circle vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Success</div>
The operation completed successfully.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-warning">
<i class="ph ph-warning vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Warning</div>
Please review your settings before continuing.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-danger">
<i class="ph ph-x-circle vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Error</div>
Something went wrong. Please try again.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-info">
<i class="ph ph-info vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Info</div>
Here is some useful information.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-primary">
<i class="ph ph-info vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Primary</div>
A primary alert with dark background.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-secondary">
<i class="ph ph-info vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Secondary</div>
A secondary alert with mint background.
</div>
</div>
</div>
<div class="figma-row">
<div class="alert alert-accent">
<i class="ph ph-info vmk-icon"></i>
<div class="alert-content">
<div class="alert-title">Accent</div>
An accent alert with yellow background.
</div>
</div>
</div>
</div>
</body>
</html>
