@haxtheweb/create
Version:
CLI for all things HAX the web
49 lines (45 loc) • 1.31 kB
HTML
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Demonstration for <%= name %>">
<style>
:root, html, body {
margin: var(--ddd-spacing-0);
padding: var(--ddd-spacing-0);
}
#demo {
margin: var(--ddd-spacing-2);
}
<%= name %> {
margin: var(--ddd-spacing-2);
border: var(--ddd-border-md);
border-radius: var(--ddd-radius-lg);
}
<%= name %>:hover {
box-shadow: var(--ddd-boxShadow-sm);
}
#example {
--<%= name %>-font-size: var(--ddd-font-size-l);
background-color: var(--ddd-accent-2);
color: var(--ddd-primary-17);
}
</style>
<title><%= name %></title>
</head>
<body>
<div id="demo">
<h1><%= name %></h1>
<!-- this is going to do whatever the tag's defaults are -->
<h2>Default</h2>
<<%= name %>></<%= name %>>
<h2>Slot usage</h2>
<<%= name %> data-accent="2" data-primary="17"><div>Sample slot content</div></<%= name %>>
<h2>Property usage</h2>
<<%= name %> id="example" title="Sample property title"></<%= name %>>
</div>
<script type="module" src="./<%= name %>.js"></script>
</body>
</html>