<div class="usa-section">
<div class="grid-container">
<h2>Flex test</h2>
<p class="usa-intro">
Test to verify flex properties, specifically `flex` fill and `flex`
shorthands are working properly in <strong>all</strong> browsers,
including IE11.
</p>
</div>
</div>
<section>
<div class="grid-container">
<h3>Grid</h3>
<div class="grid-row">
<div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
.grid-col-auto
</div>
<div class="grid-col-fill border border-primary-light bg-primary-lighter padding-4">
.grid-col-fill
</div>
<div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
.grid-col-auto
</div>
</div>
<div class="grid-row">
<div class="grid-col border border-primary-light bg-primary-lighter padding-4">
.grid-col
</div>
<div class="grid-col-fill border border-primary-light bg-primary-lighter padding-4">
.grid-col-fill
</div>
<div class="grid-col border border-primary-light bg-primary-lighter padding-4">
.grid-col
</div>
</div>
<div class="grid-row">
<div class="flex-1 grid-col border border-primary-light bg-primary-lighter padding-4">
.flex-1
</div>
<div class="flex-1 grid-col border border-primary-light bg-primary-lighter padding-4">
.flex-1
</div>
<div class="grid-col border border-primary-light bg-primary-lighter padding-4">
.grid-col
</div>
</div>
<div class="grid-row">
<div class="tablet:grid-col-4 border border-primary-light bg-primary-lighter padding-4">
.tablet:grid-col-4
</div>
<div class="tablet:grid-col-4 desktop:grid-col-fill border border-primary-light bg-primary-lighter padding-4">
.tablet:grid-col-4.desktop:grid-col-fill
</div>
<div class="grid-col-auto border border-primary-light bg-primary-lighter padding-4">
.grid-col-auto
</div>
</div>
</div>
</section>
<section class="usa-section">
<div class="grid-container">
<h3>Utilities</h3>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
<div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
<div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
<div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
<div class="border bg-accent-warm padding-4 flex-auto">.flex-auto</div>
<div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
<div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
<div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
<div class="border bg-accent-warm padding-4 flex-3">.flex-3</div>
<div class="border bg-accent-warm padding-4 flex-4">.flex-4</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
<div class="border bg-accent-warm padding-4 flex-5">.flex-5</div>
<div class="border bg-accent-warm padding-4 flex-6">.flex-6</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-7">.flex-7</div>
<div class="border bg-accent-warm padding-4 flex-5">.flex-5</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-8">.flex-8</div>
<div class="border bg-accent-warm padding-4 flex-4">.flex-4</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-9">.flex-9</div>
<div class="border bg-accent-warm padding-4 flex-3">.flex-3</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-10">.flex-10</div>
<div class="border bg-accent-warm padding-4 flex-2">.flex-2</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-11">.flex-11</div>
<div class="border bg-accent-warm padding-4 flex-1">.flex-1</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm padding-4 flex-12">.flex-12</div>
</div>
<div class="display-flex flex-row">
<div class="border bg-accent-warm-light padding-4 flex-fill">
<h3>.flex-fill</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
porro iure!
</p>
</div>
<div class="flex-auto border bg-accent-warm-light padding-4">
<h3>.flex-auto</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
accusamus facilis nam, dignissimos illum, iure obcaecati, officia
ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
Iste laborum possimus temporibus amet, ipsa magni.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
ducimus atque recusandae quidem quia illum, eos, minus, mollitia
repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
incidunt, tempora odio modi neque veritatis ratione perferendis
necessitatibus quo animi dolorum.
</p>
</div>
</div>
<div class="display-flex flex-row flex-wrap">
<div class="border bg-yellow padding-4 flex-1">
<h3>.flex-1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
porro iure!
</p>
</div>
<div class="border bg-yellow padding-4 flex-3">
<h3>.flex-3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
accusamus facilis nam, dignissimos illum, iure obcaecati, officia
ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
Iste laborum possimus temporibus amet, ipsa magni.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
ducimus atque recusandae quidem quia illum, eos, minus, mollitia
repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
incidunt, tempora odio modi neque veritatis ratione perferendis
necessitatibus quo animi dolorum.
</p>
</div>
</div>
<div class="display-flex flex-row flex-wrap">
<div class="border bg-yellow padding-4 flex-auto">
<h4>.flex-auto</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
dignissimos enim recusandae, qui possimus eos ullam, natus repellendus
eaque veniam harum officiis distinctio unde temporibus, ipsa ex est
nulla amet cupiditate facilis accusamus officia eum hic magnam! Nemo,
porro iure!
</p>
</div>
<div class="border bg-yellow padding-4 flex-2">
<h4>.flex-2</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
accusamus facilis nam, dignissimos illum, iure obcaecati, officia
ratione necessitatibus asperiores voluptas mollitia amet commodi nisi!
Aliquam deserunt illum, quibusdam rem adipisci sapiente minus veniam
pariatur! Dolorum quisquam quos libero esse voluptate. Officia, soluta
placeat. Nemo, animi! Qui minima sequi omnis, quibusdam mollitia in.
Iste laborum possimus temporibus amet, ipsa magni.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis eius
ducimus atque recusandae quidem quia illum, eos, minus, mollitia
repellat quaerat ipsam modi? Neque ullam commodi pariatur? Voluptate
incidunt, tempora odio modi neque veritatis ratione perferendis
necessitatibus quo animi dolorum.
</p>
</div>
</div>
<h4>Align-self (row)</h4>
<div class="display-flex flex-row height-card bg-base-lightest margin-bottom-3">
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-stretch">.flex-align-self-stretch</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-start">.flex-align-self-start</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-center">.flex-align-self-center</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-end">.flex-align-self-end</div>
</div>
<h4>Align-self (column)</h4>
<div class="display-flex flex-column bg-base-lightest margin-bottom-3">
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-stretch">.flex-align-self-stretch</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-start">.flex-align-self-start</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-center">.flex-align-self-center</div>
<div class="border border-primary-light bg-primary-lighter padding-3 flex-align-self-end">.flex-align-self-end</div>
</div>
</div>
</section>
<section class="usa-section">
<div class="grid-container">
<h3>Real scenarios</h3>
<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-4">
<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 tablet:grid-col-4 desktop:grid-col-fill">
<div class="usa-card__container">
<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-6">
<div class="usa-card__container">
<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-6">
<div class="usa-card__container">
<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>
</div>
<div class="grid-container">
<h3>
<a class="usa-link" href="https://github.com/uswds/uswds/issues/3471">Issue #3471</a>
</h3>
<div class="grid-row">
<div class="grid-col-12">
<ul class="usa-card-group">
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<ul class="usa-card-group">
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
<li class="tablet:grid-col-4 usa-card">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Title</h2>
</header>
<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__footer">
<button class="usa-button usa-button--accent-cool">Eat candy</button>
</div>
</div>
</li>
</ul>
</div>
</section>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()