<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Color</title>
<script src="./main.js" type="module"></script>
</head>
<body style="display:flex;justify-content: center">
<main style="width: 600px">
<a href="../index.html">Back to overview</a>
<hr> <br>
<h1>Icons</h1>
<h2>Primary</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-primary-1-info"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-positiv"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-negativ"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-warning"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-neutral"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-info"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-question"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-plus"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-dash"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-gear"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-home"></span> Text mit Icons.
Das ist ein <span class="monster-icon-primary-1-counterclockwise"></span> Text mit Icons.
</div>
<h2>Secondary</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-secondary-1-info"></span> Text mit Icons.
Das ist ein <span class="monster-icon-secondary-1-positiv"></span> Text mit Icons.
Das ist ein <span class="monster-icon-secondary-1-negativ"></span> Text mit Icons.
Das ist ein <span class="monster-icon-secondary-1-warning"></span> Text mit Icons.
Das ist ein <span class="monster-icon-secondary-1-neutral"></span> Text mit Icons.
Das ist ein <span class="monster-icon-secondary-1-info"></span> Text mit Icons.
</div>
<h2>Tertiary</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-tertiary-1-info"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-1-positiv"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-1-negativ"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-1-warning"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-1-neutral"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-1-info"></span> Text mit Icons.
</div>
<h2>Tertiary 3</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-tertiary-3-info"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-3-positiv"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-3-negativ"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-3-warning"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-3-neutral"></span> Text mit Icons.
Das ist ein <span class="monster-icon-tertiary-3-info"></span> Text mit Icons.
</div>
<h2>Success</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-success-1"></span> Text mit Icons.
Das ist ein <span class="monster-icon-success-2"></span> Text mit Icons.
Das ist ein <span class="monster-icon-success-3"></span> Text mit Icons.
Das ist ein <span class="monster-icon-success-4"></span> Text mit Icons.
</div>
<h2>Warning</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-warning-1"></span> Text mit Icons.
Das ist ein <span class="monster-icon-warning-2"></span> Text mit Icons.
Das ist ein <span class="monster-icon-warning-3"></span> Text mit Icons.
Das ist ein <span class="monster-icon-warning-4"></span> Text mit Icons.
</div>
<h2>Error</h2>
<div class="container" style="font-size: 16px">
Das ist ein <span class="monster-icon-error-1"></span> Text mit Icons.
Das ist ein <span class="monster-icon-error-2"></span> Text mit Icons.
Das ist ein <span class="monster-icon-error-3"></span> Text mit Icons.
Das ist ein <span class="monster-icon-error-4"></span> Text mit Icons.
</div>
</main>
</body>
</html>