-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbox.html
88 lines (71 loc) · 2.27 KB
/
box.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box</title>
<script type="module" src="./layouts.js"></script>
<style>
box-layout {
max-inline-size: min-content;
}
box-layout.head {
color: red;
background-color: black;
}
/* box-layout.width {
min-inline-size: 20ch;
} */
</style>
</head>
<body>
<h3>A stack wrapping several box demos</h3>
<stack-layout space="1rem">
<h3>Two boxes nested within another</h3>
<box-layout>
<box-layout>head</box-layout>
<box-layout>body</box-layout>
</box-layout>
<h3>Two boxes nested in a stack within another box</h3>
<box-layout>
<stack-layout>
<box-layout>head</box-layout>
<box-layout>body</box-layout>
</stack-layout>
</box-layout>
<h3>Two boxes w/ no border nested in a another 0 padding</h3>
<box-layout padding="0">
<box-layout borderWidth="0">head</box-layout>
<box-layout borderWidth="0">body</box-layout>
</box-layout>
<h3>The above with styling to create a card</h3>
<box-layout padding="0">
<box-layout borderWidth="0" class="head min-width:small text-align:center">
Head
</box-layout>
<box-layout borderWidth="0" class="min-width:small">
<!-- 123456789 123456789 1234567890 -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum aut veniam ullam neque expedita ut nihil molestias laborum. Dolorum quod autem ipsum repellat id nulla quis perferendis enim doloribus neque?
</box-layout>
</box-layout>
</stack-layout>
</body>
</html>
<!--
<script type="module">
import '../layouts.js'
</script>
<stack-layout space="1.5rem">
<h2> We present boxes!</h2>
<box-layout>
<p>This is a paragraph box!</p>
</box-layout>
<box-layout>
This is a text box!
</box-layout>
</stack-layout>
<box-layout padding="0">
<stack-layout space="0">
<box-layout>head</box-layout>
<box-layout>body</box-layout>
</stack-layout>
</box-layout>
-->