Skip to content

Commit 910086d

Browse files
rachelandrewrachelandrew
committed
Card pattern and Pagination pattern
1 parent 8dad9a5 commit 910086d

File tree

6 files changed

+519
-0
lines changed

6 files changed

+519
-0
lines changed

‎css-cookbook/balloons.jpg

107 KB
Loading

‎css-cookbook/balloons2.jpg

96.4 KB
Loading

‎css-cookbook/card--download.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: card component</title>
9+
10+
11+
<style>
12+
/* body rules included when showing the example as a live example */
13+
body {
14+
background-color: #fff;
15+
color: #333;
16+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
17+
padding: 0;
18+
margin: 0;
19+
}
20+
21+
img {
22+
max-width: 100%;
23+
}
24+
25+
.cards {
26+
display: grid;
27+
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
28+
grid-gap: 20px;
29+
max-width: 800px;
30+
margin: 1em auto;
31+
}
32+
33+
.card {
34+
display: grid;
35+
grid-template-rows: max-content 200px 1fr;
36+
border: 1px solid #999;
37+
border-radius: 3px;
38+
}
39+
40+
.card img {
41+
object-fit: cover;
42+
width: 100%;
43+
height: 100%;
44+
}
45+
46+
.card h2 {
47+
margin: 0;
48+
padding: .5rem;
49+
}
50+
51+
.card .content {
52+
padding: .5rem;
53+
}
54+
55+
.card footer {
56+
background-color: #333;
57+
color: #fff;
58+
padding: .5rem;
59+
}
60+
</style>
61+
62+
63+
64+
</head>
65+
66+
<body>
67+
68+
<div class="cards">
69+
<article class="card">
70+
<header>
71+
<h2>A short heading</h2>
72+
</header>
73+
74+
<img src="balloons.jpg" alt="Hot air balloons">
75+
<div class="content">
76+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
77+
years ago. </p>
78+
</div>
79+
80+
</article>
81+
82+
<article class="card">
83+
<header>
84+
<h2>A short heading</h2>
85+
</header>
86+
87+
<img src="balloons2.jpg" alt="Hot air balloons">
88+
<div class="content">
89+
<p>Short content.</p>
90+
</div>
91+
<footer>I have a footer!</footer>
92+
</article>
93+
94+
<article class="card">
95+
<header>
96+
<h2>A longer heading in this card</h2>
97+
</header>
98+
99+
<img src="balloons.jpg" alt="Hot air balloons">
100+
<div class="content">
101+
<p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a
102+
suggestion for reaching the North Pole by an aerostat.</p>
103+
</div>
104+
<footer>I have a footer!</footer>
105+
</article>
106+
<article class="card">
107+
<header>
108+
<h2>A short heading</h2>
109+
</header>
110+
111+
<img src="balloons2.jpg" alt="Hot air balloons">
112+
<div class="content">
113+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
114+
years ago. </p>
115+
</div>
116+
117+
</article>
118+
</div>
119+
120+
</body>
121+
122+
</html>

‎css-cookbook/card.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Cookbook: card component</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
img {
10+
max-width: 100%;
11+
}
12+
13+
.cards {
14+
max-width: 800px;
15+
margin: 1em auto;
16+
}
17+
18+
.card {
19+
border: 1px solid #999;
20+
border-radius: 3px;
21+
}
22+
23+
.card img {
24+
object-fit: cover;
25+
width: 100%;
26+
height: 100%;
27+
}
28+
29+
.card h2 {
30+
margin: 0;
31+
padding: .5rem;
32+
}
33+
34+
.card .content {
35+
padding: .5rem;
36+
}
37+
38+
.card footer {
39+
background-color: #333;
40+
color: #fff;
41+
padding: .5rem;
42+
}
43+
</style>
44+
45+
<style class="editable">
46+
.cards {
47+
display: grid;
48+
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
49+
grid-gap: 20px;
50+
}
51+
52+
.card {
53+
display: grid;
54+
grid-template-rows: max-content 200px 1fr;
55+
}
56+
57+
.card img {
58+
object-fit: cover;
59+
width: 100%;
60+
height: 100%;
61+
}
62+
</style>
63+
</head>
64+
65+
<body>
66+
<section class="preview">
67+
<div class="cards">
68+
<article class="card">
69+
<header>
70+
<h2>A short heading</h2>
71+
</header>
72+
73+
<img src="balloons.jpg" alt="Hot air balloons">
74+
<div class="content">
75+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
76+
years ago. </p>
77+
</div>
78+
79+
</article>
80+
81+
<article class="card">
82+
<header>
83+
<h2>A short heading</h2>
84+
</header>
85+
86+
<img src="balloons2.jpg" alt="Hot air balloons">
87+
<div class="content">
88+
<p>Short content.</p>
89+
</div>
90+
<footer>I have a footer!</footer>
91+
</article>
92+
93+
<article class="card">
94+
<header>
95+
<h2>A longer heading in this card</h2>
96+
</header>
97+
98+
<img src="balloons.jpg" alt="Hot air balloons">
99+
<div class="content">
100+
<p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a
101+
suggestion for reaching the North Pole by an aerostat.</p>
102+
</div>
103+
<footer>I have a footer!</footer>
104+
</article>
105+
<article class="card">
106+
<header>
107+
<h2>A short heading</h2>
108+
</header>
109+
110+
<img src="balloons2.jpg" alt="Hot air balloons">
111+
<div class="content">
112+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
113+
years ago. </p>
114+
</div>
115+
116+
</article>
117+
</div>
118+
119+
</section>
120+
121+
<textarea class="playable playable-css" style="height: 300px;">
122+
.cards {
123+
display: grid;
124+
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
125+
grid-gap: 20px;
126+
}
127+
128+
.card {
129+
display: grid;
130+
grid-template-rows: max-content 200px 1fr;
131+
}
132+
133+
.card img {
134+
object-fit: cover;
135+
width: 100%;
136+
height: 100%;
137+
}
138+
</textarea>
139+
140+
<textarea class="playable playable-html" style="height: 270px;">
141+
<div class="cards">
142+
<article class="card">
143+
<header>
144+
<h2>A short heading</h2>
145+
</header>
146+
<img src="balloons.jpg" alt="Hot air balloons">
147+
<div class="content">
148+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p>
149+
</div>
150+
151+
</article>
152+
153+
<article class="card">
154+
<header>
155+
<h2>A short heading</h2>
156+
</header>
157+
<img src="balloons2.jpg" alt="Hot air balloons">
158+
<div class="content">
159+
<p>Short content.</p>
160+
</div>
161+
<footer>I have a footer!</footer>
162+
</article>
163+
164+
<article class="card">
165+
<header>
166+
<h2>A longer heading in this card</h2>
167+
</header>
168+
<img src="balloons.jpg" alt="Hot air balloons">
169+
<div class="content">
170+
<p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a
171+
suggestion for reaching the North Pole by an aerostat.</p>
172+
</div>
173+
<footer>I have a footer!</footer>
174+
</article>
175+
<article class="card">
176+
<header>
177+
<h2>A short heading</h2>
178+
</header>
179+
<img src="balloons2.jpg" alt="Hot air balloons">
180+
<div class="content">
181+
<p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
182+
years ago. </p>
183+
</div>
184+
185+
</article>
186+
</div>
187+
188+
</textarea>
189+
190+
<!-- leave everything below here alone -->
191+
<div class="playable-buttons">
192+
<input id="reset" type="button" value="Reset">
193+
</div>
194+
</body>
195+
<script src="playable.js"></script>
196+
197+
</html>

0 commit comments

Comments
 (0)