Image Text Centered

Basic

Topic

Tagline Lorem Ipsum

Aliquet risus feugiat in ante metus dictum at tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

<div class="c-image-text c-image-text--centered ">
  <div class="c-image-text__container">
    <div class="c-image-text__header">
      <!-- Optional Eyebrow -->
      <p class="c-image-text__eyebrow nyp-type-eyebrow u-m-b-xs">Topic</p>
      <h2 class="c-image-text__headline nyp-type-h2">Tagline Lorem Ipsum</h2>
      <!-- Optional Sub-Headline -->
      <p class="c-image-text__sub-headline nyp-type-h4 nyp-type-light u-m-b">Aliquet risus feugiat in ante metus dictum at tempor.</p>
    </div>
    <!-- Optional Image -->
    <div class="c-image-text__img o-ar o-ar--16:9" >
      <!-- Recommend 16:9 image ratio -->
      <img class="o-ar__item" src="/images/placeholder/doctor-16-9-w960.jpg" alt="">
    </div>
    <!-- Optional Body -->
    <div class="c-image-text__body">
      <p class="c-image-text__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
    <!-- Optional Footer & CTA -->
    <div class="c-image-text__footer u-w-100">
      <a href="#" class="c-button c-button--secondary c-button--mobile__100">
        Learn More
      </a>
    </div>
  </div>
</div>

Bookend

Bookend is used at the end of the page before the footer. Add the --bookend modifier to the class list.

Optional Topic

Tagline for Bookend Lorem ipsum

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

Learn More

<div class="c-image-text c-image-text--centered c-image-text--bookend u-text-center" style="background-image: url()">
  <div class="c-image-text__container">
    <div class="c-image-text__header">
      <!-- Optional Eyebrow -->
      <p class="c-image-text__eyebrow nyp-type-eyebrow u-m-b-xs">Optional Topic</p>
      <h2 class="c-image-text__headline nyp-type-h2">Tagline for Bookend Lorem ipsum</h2>
    </div>
    <div class="c-image-text__body">
      <p class="c-image-text__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
      </p>
    </div>
    <!-- Footer & CTA -->
    <div class="c-image-text__footer u-w-100">
      <a href="#" class="c-button c-button c-button--mobile__100">
        Learn More
      </a>
    </div>
  </div>
</div>

Bookend with black background and optional background image

Add the c-image-text--dark-bg class, u-bg-black and u-c-white utility classes along with a background pattern to create this bookend.

Optional Topic

Tagline for Bookend Lorem ipsum

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

Learn More

<div class="c-image-text c-image-text--centered c-image-text--bookend c-image-text--dark-bg u-bg-black u-c-white u-text-center" style="background-image: url(/images/patterns/pattern-white.png)">
  <div class="c-image-text__container">
    <div class="c-image-text__header">
      <!-- Optional Eyebrow -->
      <p class="c-image-text__eyebrow nyp-type-eyebrow u-m-b-xs">Optional Topic</p>
      <h2 class="c-image-text__headline nyp-type-h2">Tagline for Bookend Lorem ipsum</h2>
    </div>
    <div class="c-image-text__body">
      <p class="c-image-text__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
      </p>
    </div>
    <!-- Footer & CTA -->
    <div class="c-image-text__footer u-w-100">
      <a href="#" class="c-button c-button c-button--mobile__100">
        Learn More
      </a>
    </div>
  </div>
</div>