<!doctype html>
<html lang="en_EN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="modern-386.css">
</head>

<body class="home">
    <header id="header" class="header">
		<div class="container">
			<div class="grid">
				<div class="col-12">
					<div class="text-center">
                        <hgroup>
							<a href="/">
                                <h1 class="h2 margin-top-4 margin-bottom-0">
								    Modern 386
                                </h1>
                            </a>
						</hgroup>
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="container">
        <div class="grid margin-top-2 margin-bottom-2">
            <div class="col-12">
                <h2>Buttons</h2>
                <button class="button button--danger button--highlight">
                    Aktivieren
                </button>

                <button class="button button--primary">
                    Aktivieren
                </button>
            </div>
        </div>
        <div class="grid margin-top-2 margin-bottom-2">
            <div class="col-12">
                <h2>Cards</h2>
                <div class="card">
                    <div class="card__header">
                        Titel
                        <button class="card__close">
                            <span class="icon icon--close"></span>
                        </button>
                    </div>
                    <div class="card__body">
                        <p>
                            dödklk döldkk kk döledkel
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%= htmlWebpackPlugin.options.footer %>

</body>
</html>