<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 padding-top-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 tablet:grid-col-12">
<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 tablet:grid-col-12">
<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>
No notes defined.
<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 padding-top-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 tablet:grid-col-12">
<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 tablet:grid-col-12">
<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>
package:
name: null
version: 1.0.0
uswds:
path: ../../dist