Flex

<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></p>
            <div class="grid-row">
                <!-- <div class="gid-col-12"> -->
                <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>

There are no notes for this item.

<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></p>
  <div class="grid-row">
    <!-- <div class="gid-col-12"> -->
    <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>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist