Kitchen Sink

This is for testing. If you have made it visible by setting hidden: false in the kitchen-sink.config.yml file, please don’t leave it that way when getting ready to merge your PR.

Kitchen Sink

Component Preview
<div class="bg--black--pattern--brain container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--black--pattern--community container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--black--pattern--particle container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--black container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gold--pattern--brain container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gold--pattern--community container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gold--pattern--particle container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gold container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gray--pattern--brain container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gray--pattern--community container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gray--pattern--particle container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--gray container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--white--pattern--brain container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--white--pattern--community container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--white--pattern--particle container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>
  <div class="bg--white container--padded">
      <a href="https://www.example.com" class="bttn bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--primary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--caps">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="" class="bttn bttn--outline bttn--tertiary bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <a href="https://www.example.com" class="bttn bttn--secondary bttn--sans-serif bttn--outline bttn--outline">
          More News
      </a>
      <a href="" class="bttn bttn--link bttn--sans-serif">
          More News
          <i class="fas fa-arrow-right"></i>
      </a>
      <h2 class="headline ">
          <span class="headline__text">Roboto</span>
      </h2>
      <h2 class="headline ">
          <a href="https://uiowa.edu">
              <span class="headline__text">Roboto</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio</span>
          </a>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <span class="headline__text">Antonio - Underline</span>
      </h2>
      <h2 class="headline headline--underline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Underline</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <span class="headline__text">Antonio - Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--uppercase">
          <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
      </h2>
      <h2 class="headline headline--uppercase">
          <a href="https://uiowa.edu">
              <span class="headline__text">Antonio - Single <span>Word</span> Highlighted</span>
          </a>
      </h2>
      <h2 class="headline headline--serif">
          <span class="headline__text">Zilla Slab (Serif)</span>
      </h2>
      <h2 class="headline headline--serif">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif)</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
      </h2>
      <h2 class="headline headline--serif headline--underline">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Underlined</span>
          </a>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
      </h2>
      <h2 class="headline headline--serif headline--highlight">
          <a href="https://uiowa.edu">
              <span class="headline__text">Zilla Slab (Serif) - Highlighted</span>
          </a>
      </h2>
      <p>Iowa's <em>leadership</em> in both the <sub>arts and sciences</sub> fosters unique <u>resources</u>, like the <a href="https://uiowa.edu">College of Medicine's Arts and Humanities Program</a>, that will help <strong>you stand out.</strong></p>
      <blockquote>
          <p>Blockquote Text</p>
      </blockquote>
      <figcaption>Figcaption <a href="/">Link</a></figcaption>
      <table>
          <caption>This is a default table. <a href="#">Link</a>
              <p><a href="#">Link</a></p>
          </caption>
          <thead>
              <tr>
                  <th><a href="/">Person</a></th>
                  <th>Number</th>
                  <th>Third Column</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <th>Someone Lastname</th>
                  <td>900</td>
                  <td>Nullam quis <a href="/">Link</a> risus eget urna mollis ornare vel eu leo.<p><a href="/">Link</a></p>
                  </td>
              </tr>
              <tr>
                  <th>
                      <a href="#">Person Name</a>
                  </th>
                  <td>1200</td>
                  <td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper
                      nulla non metus auctor fringilla.</td>
              </tr>
              <tr>
                  <th>Another Person</th>
                  <td>1500</td>
                  <td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                      auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
              </tr>
              <tr>
                  <th>Last One</th>
                  <td>2800</td>
                  <td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras
                      mattis consectetur purus sit amet fermentum.</td>
              </tr>
          </tbody>
      </table>
      <div class="card__wrapper">

          <div class="card click-container card--stacked bg--white card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature1.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Dedicated to having an impact on human health</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container card--enclosed card--stacked card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature4.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Swinging for the fences in sports management</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gold card--stacked  card--enclosed card__row">
              <div class="card__media ">
                  <img class="" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/feature3.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" aria-describedby="desc-a-card" class="click-target">
                          <span class="headline__text">Turning the tide for sick seals</span>
                      </a>
                  </h2>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif" id="desc-a-card">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  /*margin: 1.25rem 3rem 10rem;*/
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
      <div class="card__wrapper">

          <div class="card click-container bg--white card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--black card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

          <div class="card click-container bg--gray card--media-left card--enclosed card__row">
              <div class="card__media media--circle card__media--small">
                  <img class="media--border media--circle" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/events-01.jpg" alt="Alt Text">
              </div>

              <div class="card__body">
                  <h2 class="headline ">
                      <a href="https://uiowa.edu/" class="click-target">
                          <span class="headline__text">Getting to know Iowa's fall 2018 graduates</span>
                      </a>
                  </h2>

                  <div class="card__details">
                      <div class="card__subtitle">Card Subtitle</div>
                      <div class="card__meta">
                          June 14, 1984
                      </div>
                      <div class="card__meta">
                          <i class="fas fa-map-marker-alt"></i>
                          Carver-Hawkeye Arena
                      </div>
                  </div>

                  <p>Iowa's leader<em>ship in both t</em>he arts <sub>and scien</sub>ces fosters unique resou<u>rces, like the </u>Coll<a data-entity-substitution="canonical" data-entity-type="node" data-entity-uuid="59f8f236-7301-4dcb-afc6-3d535ae6fc6b" href="/node/21" media_library="Media Library">ege of Medi</a>cine's Arts and Humanities Program, that will help <strong>you stand out.</strong></p>
                  <blockquote>
                      <p>Blockquote <a href="/">Text</a> More text </p>
                  </blockquote>
                  <ul>
                      <li><a href="https://uiowa.edu">List item</a></li>
                      <li>List item</li>
                  </ul>
                  <h2>Heading 2</h2>
                  <h3>Heading 3</h3>
                  <h4>Heading 4</h4>
                  <h6>Heading 6</h6>

                  <div aria-hidden="true" class="bttn bttn--outline bttn--sans-serif">
                      View Story
                      <i class="fas fa-arrow-right"></i>
                  </div>
              </div>
          </div>

      </div>

      <style>
          @media (min-width: 855px) {
              .card__row {
                  margin-right: 1.6rem;
                  margin-bottom: 0;
                  margin-left: 1.6rem
              }

              .card__row:first-of-type {
                  margin-left: 0
              }

              .card__row:last-of-type {
                  margin-right: 0
              }
          }

          .card__wrapper {
              margin: 1.25rem 1.25rem
          }

          @media (min-width: 855px) {
              .card__wrapper {
                  padding: 1.25rem 3rem;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex
              }
          }

          // ie11
          @media all and (-ms-high-contrast: none),
          (-ms-high-contrast: active) {
              .card__body {
                  flex: auto !important;
              }
          }
      </style>
  </div>

  <style>
      [class*="bg--"] {
          min-height: 600px;
      }

      .container--padded {
          padding: 40px;
      }
  </style>