Image Text 50/50

See demo page for more examples.

Optional Eyebrow

16:9 Example -- nibh sit amet.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, vel, consequatur natus quas esse impedit laudantium ratione architecto nisi expedita facere explicabo consectetur deleniti beatae est nulla rerum! Vero, pariatur!

Optional CTA

<div class="o-grid c-image-text u-m-0">
  <!-- Background Image -->
  <!-- attach the correct ar class for the aspect ratio of the image to make sure it breaks down correctly on mobile -->
  <!-- See Objects > Aspect Ratio in framework -->
  <div class="o-grid__item-6@md c-image-text__image o-ar o-ar--16:9">
    <div class="c-image__wrapper o-ar__item" style="background-image:url(/images/placeholder/doctor-16-9.jpg); height: 100%; background-repeat: no-repeat;">
      <img class="u-visually-hidden" src="/images/placeholder/doctor-16-9.jpg" alt=""/>
      <!-- The following line is not necessary for accessibility unless the background-image NEEDS to be described -->
      <span class="u-visually-hidden" role="img" aria-label="[place alt text here]"></span>
    </div>
  </div>

  <div class="o-grid__item-6@md u-d-flex u-f-align-center c-image-text__text">
    <div>
      <p class="nyp-type-eyebrow u-m-b-xs">Optional Eyebrow</p>
      <h3 class="nyp-type-h2 u-m-t-0">16:9 Example -- nibh sit amet.</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, vel, consequatur natus quas esse impedit laudantium ratione architecto nisi expedita facere explicabo consectetur deleniti beatae est nulla rerum! Vero, pariatur!</p>

      <a href="#" class="c-button c-button--tertiary c-button--mobile__100">
        Optional CTA
      </a>
    </div>
  </div>
</div>

U.S. News and World Report Best Hospital Rankings

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

Optional Eyebrow

Card Example

Allows for a card layout to be added to the .c-image-text__card div. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, vel, consequatur natus quas esse impedit laudantium ratione architecto nisi expedita facere explicabo consectetur deleniti beatae est nulla rerum! Vero, pariatur!

Optional CTA

<div class="o-grid c-image-text u-m-0">
  <div class="o-grid__item-6@md c-image-text__card">
    <div class="c-card c-card--accolade">
      <div class="c-card__img">
        <!-- Make sure the award image has the proper alt tag -->
        <img src="/images/placeholder/badge-best-hospitals.png" alt="U.S. News and World Report Best Hospital Rankings">
      </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. Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>

  <div class="o-grid__item-6@md u-d-flex u-f-align-center c-image-text__text">
    <div>
      <p class="nyp-type-eyebrow u-m-b-xs">Optional Eyebrow</p>
      <h3 class="nyp-type-h2 u-m-t-0">Card Example</h3>
      <p>Allows for a card layout to be added to the <code>.c-image-text__card</code> div. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, vel, consequatur natus quas esse impedit laudantium ratione architecto nisi expedita facere explicabo consectetur deleniti beatae est nulla rerum! Vero, pariatur!</p>

      <a href="#" class="c-button c-button--tertiary c-button--mobile__100">
        Optional CTA
      </a>
    </div>
  </div>
</div>

Variations

Image on Right

Optional Eyebrow

1:1 Square Example -- sit amet.

Optional CTA

<div class="o-grid c-image-text c-image-text--right u-m-0">
  <!-- attach the correct ar class for the aspect ratio of the image to make sure it breaks down correctly on mobile -->
  <!-- See Objects > Aspect Ratio in framework -->
  <div class="o-grid__item-6@md c-image-text__image o-ar o-ar--1:1">
    <div class="c-image__wrapper o-ar__item"
      style="background-image:url(/images/placeholder/doctor-1-1.png); height: 100%; background-repeat: no-repeat;"><span class="u-visually-hidden" role="img" aria-label="[place alt text here]"></span>
    </div>
  </div>
  <div class="o-grid__item-6@md u-d-flex u-f-align-center c-image-text__text">
    <div>
      <p class="nyp-type-eyebrow u-m-b-xs">Optional Eyebrow</p>
      <h3 class="nyp-type-h2 u-m-t-0">1:1 Square Example -- sit amet.</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, vel, consequatur natus quas esse impedit laudantium ratione architecto nisi expedita facere explicabo consectetur deleniti beatae est nulla rerum! Vero, pariatur!</p>

      <a href="#" class="c-button c-button--tertiary c-button--mobile__100">
        Optional CTA
      </a>
    </div>
  </div>
</div>

Scaled image

This is a special 50/50. The image is not a background image and is scaled to fit the space. The image is also postitioned at the top of the grid. The padding above and below the text has been removed.

Our Tradition

A Legacy of Excellence in Patient Care

Founded nearly 250 years ago with the fundamental belief that every person deserves access to the very best care, NewYork-Presbyterian is one of the nation’s most comprehensive, integrated academic healthcare systems, from dependable primary care to the most sophisticated specialties.

In collaboration with two world renowned academic institutions, Weill Cornell Medicine and Columbia University, NewYork-Presbyterian is a leader in medical education, groundbreaking research, and innovative clinical care. This single-minded focus on excellence provides our premier healthcare professionals access to cutting-edge technology, leading telehealth resources and clinical trials.

Recognized nationally for quality and excellence, NewYork Presbyterian is ranked as the #4 hospital in the nation by U.S. News & World Report. New York’s #1 hospital for 20 years, with more “Top Doctors” than any other hospital in the country, NewYork-Presbyterian is a destination for advanced, innovative medical and surgical care.

Learn More

<div class="o-grid c-image-text c-image-text--scaled u-m-0">
  <div class="o-grid__item-6@md c-image-text__image">
    <img src="/images/placeholder/50-50-images-amazing-patients-larger--cropped.jpg" alt="U.S. News and World Report Best Hospital Rankings"/>
  </div>
  <div class="o-grid__item-6@md c-image-text__text c-image-text__text">
    <div>
      <p class="nyp-type-eyebrow u-m-b-xs">Our Tradition</p>
      <h3 class="nyp-type-h2 u-m-t-0">A Legacy of Excellence in Patient Care</h3>
      <p>Founded nearly 250 years ago with the fundamental belief that every person deserves access to the very best care,  NewYork-Presbyterian is one of the nation’s most comprehensive, integrated academic healthcare systems, from dependable primary care to the most sophisticated specialties.</p>

      <p>In collaboration with two world renowned academic institutions, Weill Cornell Medicine and Columbia University, NewYork-Presbyterian is a leader in medical education, groundbreaking research, and innovative clinical care. This single-minded focus on excellence provides our premier healthcare professionals access to cutting-edge technology, leading telehealth resources and clinical trials.</p>

      <p>Recognized nationally for quality and excellence, NewYork Presbyterian is ranked as the #4 hospital in the nation by U.S. News & World Report. New York’s #1 hospital for 20 years, with more “Top Doctors” than any other hospital in the country, NewYork-Presbyterian is a destination for advanced, innovative medical and surgical care.</p>

      <a href="#" class="c-button c-button--tertiary c-button--mobile__100">
        Learn More
      </a>
    </div>
  </div>
</div>

By adding the c-image-text--right modifier class, the image will be on the right.

Our Tradition

A Legacy of Excellence in Patient Care

Learn More

<div class="o-grid c-image-text c-image-text--scaled u-m-0">
  <div class="o-grid__item-6@md c-image-text__image">
    <img src="/images/placeholder/50-50-images-amazing-patients-larger--cropped.jpg" alt="U.S. News and World Report Best Hospital Rankings"/>
  </div>
  <div class="o-grid__item-6@md c-image-text__text c-image-text__text">
    <div>
      <p class="nyp-type-eyebrow u-m-b-xs">Our Tradition</p>
      <h3 class="nyp-type-h2 u-m-t-0">A Legacy of Excellence in Patient Care</h3>
      <p>Founded nearly 250 years ago with the fundamental belief that every person deserves access to the very best care,  NewYork-Presbyterian is one of the nation’s most comprehensive, integrated academic healthcare systems, from dependable primary care to the most sophisticated specialties.</p>

      <p>In collaboration with two world renowned academic institutions, Weill Cornell Medicine and Columbia University, NewYork-Presbyterian is a leader in medical education, groundbreaking research, and innovative clinical care. This single-minded focus on excellence provides our premier healthcare professionals access to cutting-edge technology, leading telehealth resources and clinical trials.</p>

      <p>Recognized nationally for quality and excellence, NewYork Presbyterian is ranked as the #4 hospital in the nation by U.S. News & World Report. New York’s #1 hospital for 20 years, with more “Top Doctors” than any other hospital in the country, NewYork-Presbyterian is a destination for advanced, innovative medical and surgical care.</p>

      <a href="#" class="c-button c-button--tertiary c-button--mobile__100">
        Learn More
      </a>
    </div>
  </div>
</div>

By adding the c-image-text__image--top or c-image-text__text--topmodifier class to there respective elements, the image or text will be aligned to the top. The following example shows the image aligned to the top when the screen space gets smaller.

Our Tradition

A Legacy of Excellence in Patient Care

Learn More