Card Grid

Optional Eyebrow

3-column grid lorem ipsum

Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.

---

INPATIENT & OUTPATIENT

Headline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Learn More

INPATIENT & OUTPATIENT

This card has an optional cover link.

It makes the whole card is clickable. See the Cover Link Object in the Front End Core

Learn More

INPATIENT & OUTPATIENT

Headline goes here

NewYork-Presbyterian Hospital is a world-class academic medical center committed to excellence in patient care, research, education and community service. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Learn More

INPATIENT & OUTPATIENT

Headline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Learn More

INPATIENT & OUTPATIENT

Headline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Learn More

Optional CTA

<div class="c-card-grid">
  <!-- Optional Header -->
  <div class="c-card-grid__header">
    <!-- Optional Eyebrow -->
    <p class="c-card-grid__eyebrow nyp-type-eyebrow u-m-b-xs">Optional Eyebrow</p>
    <!-- Optional Title -->
    <h2 class="nyp-type-h2 c-card-grid__title u-m-b-sm">3-column grid lorem ipsum</h2>
    <!-- Optional Body -->
    <p>Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.</p>
  </div>

  <!-- Remove divider if there is no Header content -->
  <hr class="c-card-grid__divider">

  <div class="c-card-grid__grid o-grid-pack u-m-t-md">
    <div class="o-grid o-grid-pack__grid">
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card">
          <div class="c-card__img">
            <div class="o-ar o-ar--16:9">
              <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
            </div>
            <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
              INPATIENT &amp; OUTPATIENT
            </div>
          </div>
          <div class="c-card__header">
            <h3 class="c-card__title">Headline goes here</h3>
          </div>
          <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
          </div>
          <div class="c-card__footer">
            <a href="#" class=" styled-link">Learn More</a>
          </div>
        </div>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <article class="c-card o-cover-link">
          <div class="c-card__img">
            <div class="o-ar o-ar--16:9">
              <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
            </div>
            <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
              INPATIENT &amp; OUTPATIENT
            </div>
          </div>
          <div class="c-card__header">
            <h3 class="c-card__title">This card has an optional cover link.</h3>
          </div>
          <div class="c-card__body">
            <p>It makes the whole card is clickable. See the Cover Link Object in the Front End Core</p>
          </div>
          <div class="c-card__footer">
            <a href="#" class="o-cover-link__overlay styled-link">Learn More</a>
          </div>
        </article>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card">
          <div class="c-card__img">
            <div class="o-ar o-ar--16:9">
              <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
            </div>
            <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
              INPATIENT &amp; OUTPATIENT
            </div>
          </div>
          <div class="c-card__header">
            <h3 class="c-card__title">Headline goes here</h3>
          </div>
          <div class="c-card__body">
            <p>NewYork-Presbyterian Hospital is a world-class academic medical center committed to excellence in patient care, research, education and community service. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
          </div>
          <div class="c-card__footer">
            <a href="#" class=" styled-link">Learn More</a>
          </div>
        </div>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card">
          <div class="c-card__img">
            <div class="o-ar o-ar--16:9">
              <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
            </div>
            <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
              INPATIENT &amp; OUTPATIENT
            </div>
          </div>
          <div class="c-card__header">
            <h3 class="c-card__title">Headline goes here</h3>
          </div>
          <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
          </div>
          <div class="c-card__footer">
            <a href="#" class=" styled-link">Learn More</a>
          </div>
        </div>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card">
          <div class="c-card__img">
            <div class="o-ar o-ar--16:9">
              <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
            </div>
            <div class="c-card__img--tag nyp-type-eyebrow--small u-c-white">
              INPATIENT &amp; OUTPATIENT
            </div>
          </div>
          <div class="c-card__header">
            <h3 class="c-card__title">Headline goes here</h3>
          </div>
          <div class="c-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
          </div>
          <div class="c-card__footer">
            <a href="#" class=" styled-link">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional Footer -->
  <div class="c-card-grid__footer">
    <!-- Optional CTA -->
    <a href="#" class="c-button c-button c-button--mobile__100">
      Optional CTA
    </a>
  </div>
</div>

Optional Eyebrow

Accolades grid lorem ipsum

Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.

---

abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Optional CTA

<div class="c-card-grid">
  <!-- Optional Header -->
  <div class="c-card-grid__header u-w-66">
    <!-- Optional Eyebrow -->
    <p class="c-card-grid__eyebrow nyp-type-eyebrow u-m-b-xs">Optional Eyebrow</p>
    <!-- Optional Title -->
    <h2 class="nyp-type-h2 c-card-grid__title u-m-b-sm">Accolades grid lorem ipsum</h2>
    <!-- Optional Body -->
    <p>Optional body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur sollicitudin aliquam. Fusce vitae turpis vitae augue aliquam malesuada. Cras diam magna, tempus at suscipit ornare, volutpat sed libero.</p>
  </div>

  <!-- Remove divider if there is no Header content -->
  <hr class="c-card-grid__divider">

  <div class="c-card-grid__grid o-grid-pack u-m-t-md">
    <div class="o-grid o-grid-pack__grid u-f-justify-center">
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <a href="#" class="card-link-wrapper">
        <div class="c-card c-card--accolade">
          <div class="c-card__img">
            <img src="/images/placeholder/badge-best-hospitals.png" alt="">
          </div>
          <div class="c-card__body">
            <p>abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </div>
        </div>
        </a>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card c-card--accolade">
          <div class="c-card__img">
            <img src="/images/placeholder/badge-best-hospitals.png" alt="">
          </div>
          <div class="c-card__body">
            <p>abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </div>
        </div>
      </div>
      <div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md o-grid__item-4@lg">
        <div class="c-card c-card--accolade">
          <div class="c-card__img">
            <img src="/images/placeholder/badge-best-hospitals.png" alt="">
          </div>
          <div class="c-card__body">
            <p>abbaaaaRecognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional Footer -->
  <div class="c-card-grid__footer u-m-t-lg">
    <!-- Optional CTA -->
    <a href="#" class="c-button c-button c-button--mobile__100">
      Optional CTA
    </a>
  </div>
</div>