-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·120 lines (117 loc) · 5.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dc-elements - my custom web components</title>
<style>
body {
font-family: system-ui;
background-color: #f3f4f6;
}
.elements-cards {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
.element-card {
flex: 1 0 calc(25% - 1rem);
margin: 1rem;
}
</style>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📦</text></svg>">
</head>
<body>
<main>
<h1>DC Elements</h1>
<p>A set of no-dependency web components.</p>
<p>Repo: <a href="https://github.com/UnJavaScripter/dc-elements" rel="noopener" target="_blank">https://github.com/UnJavaScripter/dc-elements</a></li></p>
<section class="elements-cards">
<article class="element-card">
<dc-facts-card
header="Checkbox"
facts='{"Description": "A checkbox element that keeps its state and triggers a change event on every change.",
"Demo": "<a href=\"./dc-elements/checkbox/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/checkbox\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="Chips"
facts='{"Description": "An element that allows you to add strings to a list of \"chips\" from an input.",
"Demo": "<a href=\"./dc-elements/add-chips/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/add-chips\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="Star rating"
facts='{"Description": "A basic star rating component that lets users rate something.",
"Demo": "<a href=\"./dc-elements/star-rating/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/star-rating\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="SVG rating"
facts='{"Description": "A highly customizable star rating component that can use more than \"stars\" to let users rate something.",
"Demo": "<a href=\"./dc-elements/svg-rating/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/svg-rating\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="SVG icon"
facts='{"Description": "A component that makes an icon out of an SVG element you can pass via HTML templates.",
"Demo": "<a href=\"./dc-elements/svg-icon/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/svg-icon\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="Step selector"
facts='{"Description": "A customizable step selector component.",
"Demo": "<a href=\"./dc-elements/step-selector/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/step-selector\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="Facts card"
facts='{"Description": "A card component that renders a list of key value pairs as a set of \"fact\" attributes.",
"Demo": "<a href=\"./dc-elements/facts-card/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/facts-card\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
<article class="element-card">
<dc-facts-card
header="Oscilloscope"
facts='{"Description": "An oscilloscope element that displays sound you pass in as an AudioContext as a sine wave.",
"Demo": "<a href=\"./dc-elements/oscilloscope/index.html\">Here</a>",
"Code": "<a href=\"https://github.com/UnJavaScripter/dc-elements/tree/master/dc-elements/oscilloscope\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub</a>"}'
separator=":"
>
</dc-facts-card>
</article>
</section>
</main>
<script src="./dc-elements/facts-card/facts-card.js"></script>
</body>
</html>