Skip to content

Commit 8dad9a5

Browse files
rachelandrewrachelandrew
committed
List Group example
Example for cookbook.
1 parent 3193a4a commit 8dad9a5

File tree

2 files changed

+172
-0
lines changed

2 files changed

+172
-0
lines changed

‎css-cookbook/list-group-badges--download.html

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<title>CSS Cookbook: List Group with Badges</title>
8+
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
15+
padding: 0;
16+
margin: 1em;
17+
}
18+
19+
.list-group {
20+
list-style: none;
21+
margin: 0;
22+
padding: 0;
23+
border: 1px solid #ccc;
24+
border-radius: .5em;
25+
width: 20em;
26+
}
27+
28+
.list-group li {
29+
border-top: 1px solid #ccc;
30+
padding: .5em;
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
34+
}
35+
36+
.list-group li:first-child {
37+
border-top: 0;
38+
}
39+
40+
.list-group .badge {
41+
background-color: rebeccapurple;
42+
color: #fff;
43+
font-weight: bold;
44+
font-size: 80%;
45+
border-radius: 10em;
46+
min-width: 1.5em;
47+
padding: .25em;
48+
text-align: center
49+
}
50+
</style>
51+
52+
53+
54+
</head>
55+
56+
<body>
57+
58+
<ul class="list-group">
59+
<li>Item One
60+
<span class="badge">2</span>
61+
</li>
62+
<li>Item Two
63+
<span class="badge">10</span>
64+
</li>
65+
<li>Item Three
66+
<span class="badge">9</span>
67+
</li>
68+
<li>Item Four
69+
<span class="badge">0</span>
70+
</li>
71+
</ul>
72+
73+
</body>
74+
75+
</html>

‎css-cookbook/list-group-badges.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Cookbook: List Group with Badges</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.list-group {
10+
list-style: none;
11+
margin: 0;
12+
padding: 0;
13+
border: 1px solid #ccc;
14+
border-radius: .5em;
15+
width: 20em;
16+
}
17+
18+
.list-group li {
19+
border-top: 1px solid #ccc;
20+
padding: .5em;
21+
}
22+
23+
.list-group li:first-child {
24+
border-top: 0;
25+
}
26+
27+
.list-group .badge {
28+
background-color: rebeccapurple;
29+
color: #fff;
30+
font-weight: bold;
31+
font-size: 80%;
32+
border-radius: 10em;
33+
min-width: 1.5em;
34+
padding: .25em;
35+
text-align: center
36+
}
37+
</style>
38+
39+
<style class="editable">
40+
.list-group li {
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
}
45+
</style>
46+
</head>
47+
48+
<body>
49+
<section class="preview">
50+
<ul class="list-group">
51+
<li>Item One
52+
<span class="badge">2</span>
53+
</li>
54+
<li>Item Two
55+
<span class="badge">10</span>
56+
</li>
57+
<li>Item Three
58+
<span class="badge">9</span>
59+
</li>
60+
<li>Item Four
61+
<span class="badge">0</span>
62+
</li>
63+
</ul>
64+
</section>
65+
66+
<textarea class="playable playable-css" style="height: 100px;">
67+
.list-group li {
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
71+
}
72+
</textarea>
73+
74+
<textarea class="playable playable-html" style="height: 270px;">
75+
<ul class="list-group">
76+
<li>Item One
77+
<span class="badge">2</span>
78+
</li>
79+
<li>Item Two
80+
<span class="badge">10</span>
81+
</li>
82+
<li>Item Three
83+
<span class="badge">9</span>
84+
</li>
85+
<li>Item Four
86+
<span class="badge">0</span>
87+
</li>
88+
</ul>
89+
</textarea>
90+
91+
<div class="playable-buttons">
92+
<input id="reset" type="button" value="Reset">
93+
</div>
94+
</body>
95+
<script src="playable.js"></script>
96+
97+
</html>

0 commit comments

Comments
 (0)