-
Notifications
You must be signed in to change notification settings - Fork 922
/
card--test.njk
193 lines (193 loc) · 10.7 KB
/
card--test.njk
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<section>
<ul class="usa-card-group">
<li class="usa-card usa-card--header-first tablet:grid-col-6">
<div class="usa-card__container border-ink">
<div class="usa-card__header bg-base-lightest">
<h3 class="usa-card__heading">
He had a little small bull pup
</h3>
<p class="font-sans-6 text-primary">To look at him you'd think he wan's worth a cent.</p>
</div>
<div class="usa-card__media">
<div class="usa-card__img add-aspect-16x9">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="An image's description"
class="pin-all"
>
</div>
</div>
<div class="usa-card__body usa-card__body--exdent text-white bg-primary padding-y-3">
<p>His underjaw'd begin to stick out like the fo'castle of a steamboat, and his teeth would uncover, and shine savage like the furnaces.</p>
<p>And a dog might tackle him, and bully-rag him, and bite him, and throw him over his shoulder two or three times, and Andrew Jackson which was the name of the pup, Andrew Jackson would never let on but what he was satisfied.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button usa-button--secondary">Stick out</a>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">There was a feller here once by the name of Jim Smiley</h3>
</div>
<div class="usa-card__body">
<p>In the winter of '49 or may be it was the spring of '50 I don't recollect exactly, somehow, though what makes me think it was one or the other is because I remember the big flume wasn't finished when he first came to the camp:</p>
<ol class="usa-list">
<li>But any way, he was the curiosest man about always betting on any thing that turned up</li>
<li>If he could get anybody to bet on the other side; and if he couldn't, he'd change sides.</li>
<li>Any way that suited the other man would suit him any way just so's he got a bet, he was satisfied.</li>
<li>But still he was lucky, uncommon lucky; he most always come out winner. </li>
</ol>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Help the less fortunate</a>
</div>
</div>
</li>
<li class="usa-card usa-card--flag usa-card--header-first desktop:grid-col-6">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">I hereunto append the result</h3>
</div>
<div class="usa-card__media usa-card__media--exdent">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>He roused up and gave me good-day. I told him a friend of mine had commissioned me to make some inquiries about a cherished companion of his boyhood named Leonidas W. Smiley.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Make some inquiries</a>
</div>
</div>
</li>
<li class="usa-card usa-card--media-right usa-card--flag desktop:grid-col-6">
<div class="usa-card__container border-primary-vivid">
<div class="usa-card__header">
<h3 class="usa-card__heading">My friend's friend</h3>
</div>
<div class="usa-card__media flex-align-center">
<div class="usa-card__img circle-card margin-x-auto">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>He roused up and gave me good-day. I told him a friend of mine had commissioned me to make some inquiries about a cherished companion of his boyhood named Leonidas W. Smiley.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button usa-button--outline">Give me good-day</a>
</div>
</div>
</li>
<li class="usa-card usa-card--header-first tablet:grid-col-6 desktop:grid-col-4">
<div class="usa-card__container">
<div class="usa-card__header">
<h3 class="usa-card__heading">If that was the design, it certainly succeeded</h3>
</div>
<div class="usa-card__media usa-card__media--exdent usa-card__media--fix-aspect add-aspect-1x1">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>He roused up and gave me good-day. I told him a friend of mine had commissioned me to make some inquiries about a cherished companion of his boyhood named Leonidas W. Smiley.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Rouse Simon</a>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6 desktop:grid-col-fill">
<div class="usa-card__container bg-base-lightest border-0">
<div class="usa-card__header">
<h3 class="usa-card__heading">Garrulous old Simon Wheeler</h3>
<p class="font-sans-6 text-primary margin-top-1">I hereunto append the result.</p>
</div>
<div class="usa-card__media usa-card__media--fix-aspect" aria-hidden="true">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>
<em>This card has aria-hidden on the image container.</em>
</p>
<p>I found Simon Wheeler dozing comfortably by the bar-room stove of the old, dilapidated tavern in the ancient mining camp of Angel's, and I noticed that he was fat and bald-headed, and had an expression of winning gentleness and simplicity upon his tranquil countenance.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Express gentleness</a>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4">
<div class="usa-card__container border-ink">
<div class="usa-card__header">
<h3 class="usa-card__heading">He never smiled, he never frowned</h3>
</div>
<div class="usa-card__media">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>Simon Wheeler backed me into a corner and blockaded me there with his chair, and then sat me down and reeled off the monotonous narrative which follows this paragraph. He never smiled, he never frowned, he never changed his voice from the gentle-flowing key to which he tuned the initial sentence, he never betrayed the slightest suspicion of enthusiasm; but all through the interminable narrative there ran a vein of impressive earnestness and sincerity, which showed me plainly that, so far from his imagining that there was any thing ridiculous or funny about his story, he regarded it as a really important matter, and admired its two heroes as men of transcendent genius in finesse.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Read more</a>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4">
<div class="usa-card__container border-ink">
<div class="usa-card__header">
<h3 class="usa-card__heading">He never smiled, he never frowned</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>Simon Wheeler backed me into a corner and blockaded me there with his chair, and then sat me down and reeled off the monotonous narrative which follows this paragraph. He never smiled, he never frowned, he never changed his voice from the gentle-flowing key to which he tuned the initial sentence, he never betrayed the slightest suspicion of enthusiasm; but all through the interminable narrative there ran a vein of impressive earnestness and sincerity, which showed me plainly that, so far from his imagining that there was any thing ridiculous or funny about his story, he regarded it as a really important matter, and admired its two heroes as men of transcendent genius in finesse.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Read more</a>
</div>
</div>
</li>
<li class="usa-card usa-card--header-first tablet:grid-col-4">
<div class="usa-card__container border-ink">
<div class="usa-card__header">
<h3 class="usa-card__heading">He never smiled, he never frowned</h3>
</div>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img
src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
alt="">
</div>
</div>
<div class="usa-card__body">
<p>Simon Wheeler backed me into a corner and blockaded me there with his chair, and then sat me down and reeled off the monotonous narrative which follows this paragraph. He never smiled, he never frowned, he never changed his voice from the gentle-flowing key to which he tuned the initial sentence, he never betrayed the slightest suspicion of enthusiasm; but all through the interminable narrative there ran a vein of impressive earnestness and sincerity, which showed me plainly that, so far from his imagining that there was any thing ridiculous or funny about his story, he regarded it as a really important matter, and admired its two heroes as men of transcendent genius in finesse.</p>
</div>
<div class="usa-card__footer">
<a href="javascript:void(0);" class="usa-button">Read more</a>
</div>
</div>
</li>
</ul>
</section>