Card

Generic Card

Your basic card component comes with a image, header, body, and footer. Some come with special properties.

The body element, c-card__body is a flex element with a flex-direction: column set which allows the body content to stretch to fill its container in context with other cards.

The footer element, c-card__footer has margin-top: auto set by default which pushes the footer down to the end of the card in contexts where the body is stretching to fill the height of the card when it's with other cards.

INPATIENT & OUTPATIENT

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

<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">
      INPATIENT & 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="c-button">Learn More</a>
  </div>
</div>

Card with Cover Link

See Cover Link object for details.

INPATIENT & OUTPATIENT

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

<div 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>
</div>

Variations

With Shadow

INPATIENT & OUTPATIENT

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

<div class="c-card c-card__shadow u-bg-white">
  <div class="c-card__img">
    <div class="o-ar o-ar--16:9">
      <img class="o-ar__item" src="/images/placeholder/audio-player-card-image-1-16-9.png" 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 a shadow.</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. Lorem ipsum dolor sit amet</p>
  </div>
  <div class="c-card__footer">
    <a href="#" class=" styled-link">Learn More</a>
  </div>
</div>

Centered

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

<div class="c-card c-card--centered u-bg-gray-light u-b-0">
  ...
</div>
...
<div class="c-card c-card--centered u-w-m100% u-bg-gray-light u-b-0">
  ...
</div>

Accolades Card

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

<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>

Contact Card

Contact cards have a unique set of phone numbers included within the component. In order to comply with accessibility standards, it is important that each span or a element which includes a phone or fax number has an aria-describedby tag included which corresponds with the id of the number and extension (if necessary).

The phone extension element should include an id that associates with the aria-describedby value in the telephone number. In the demo below, it is utilizing phone-extension-98.

The phone or fax number element should include an id that associates with the aria-describedby value in the telephone or fax number. In the demo below, it is utilizing phone-label-98 and fax-label-99.

The email element should include an id that associates with the aria-describedby value in the email address. In the demo below, it is utilizing email-label-99.

Mailing Address

56-45 Main Street
Flushing, NY 11355

Contact

718-670-2000 ext. 1234 Cardiac Rehabilitation

718-670-2000 Pulmonary Rehabilitation

[email protected] Pulmonary Rehabilitation

<div class="c-card c-card--contact c-demo-box--card">
  <div class="c-card__header">
    <h3 class="c-card__title u-c-gray-dark">NYP Office of Lorem Ipsum</h3>
  </div>
  <div class="c-card__body">
    <div class="c-card__mailing-address">
      <p class="nyp-type-eyebrow--small">Mailing Address</p>
      <div class="address o-media o-media--sm">
        <div class="o-media__img u-d-flex u-f-justify-center u-m-r-xs">
          <span class="o-svg-icon o-svg-icon--xl u-c-red">
            <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M256 0C149.9 0 64 86 64 192c0 71.1 24 93.3 151.3 297.4 18.8 30.1 62.7 30.1 81.5 0C424.1 285.2 448 263.1 448 192 448 85.9 362 0 256 0zm0 464C128.6 259.7 112 246.8 112 192c0-79.5 64.5-144 144-144s144 64.5 144 144c0 54.6-15.2 65.4-144 272zm-80-272c0-44.2 35.8-80 80-80s80 35.8 80 80-35.8 80-80 80-80-35.8-80-80z" fill="currentColor"/>
              </svg>
          </span>
        </div>
        <div class="o-media__body">
          <a class="card-info__address--link tertiary-link tertiary-link--large" href="https://www.google.com/maps/search/?api=1&query=NewYork-Presbyterian%20Queens%20Hospital%2056-45%20Main%20St%2C%20Queens%2C%20NY%2011355" target="_blank" rel="noopener">
          56-45 Main Street<br/>Flushing, NY 11355 <span class="u-visually-hidden">Opens in Google Maps</span></a>
        </div>
      </div>
    </div>

    <!-- If either c-card__mailing-address OR c-card__contact-info is missing, DO NOT show divider -->
    <div class="c-card--contact__divider u-m-vert u-w-100"></div>

    <div class="c-card__contact-info">
      <p class="nyp-type-eyebrow--small">Contact</p>
      <div class="contact-info contact-info--phone o-media o-media--sm">
        <div class="o-media__img u-d-flex u-f-justify-center u-m-r-xs">
          <span class="o-svg-icon o-svg-icon--xl u-c-red">
            <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M484.25 330l-101.59-43.55a45.86 45.86 0 00-53.39 13.1l-32.7 40a311.08 311.08 0 01-124.19-124.12l40-32.7a45.91 45.91 0 0013.1-53.42L182 27.79a45.63 45.63 0 00-52.31-26.61L35.5 22.89A45.59 45.59 0 000 67.5C0 313.76 199.68 512.1 444.56 512a45.58 45.58 0 0044.59-35.51l21.7-94.22a45.75 45.75 0 00-26.6-52.27zm-41.59 134.09C225.08 463.09 49 287 48 69.3l90.69-20.9 42.09 98.22-68.09 55.71c46.39 99 98.19 150.63 197 197l55.69-68.11 98.19 42.11z" fill="currentColor" />
              </svg>
          </span>
        </div>
        <div class="o-media__body">
          <span class="u-text-semibold u-m-r-xxs">
            <a class="tertiary-link tertiary-link--large" href="tel:+17186702000" aria-describedby="phone-extension-98 phone-label-98">718-670-2000</a>
          </span>
          <span class="phone-info u-text-italic u-text-light u-c-gray-dark">
            <!-- Optional phone extention - requires unique id -->
            <span id="phone-extension-98" class="phone-extension u-m-r-xxs">ext. 1234</span>
            <!-- Optional label - requires unique id -->
            <span id="phone-label-98" class="phone-label">Cardiac Rehabilitation</span>
          </span>
        </div>
      </div>

      <!-- Fax numbers shouldn't be linked -->
      <div class="contact-info contact-info--fax o-media o-media--sm">
        <div class="o-media__img u-d-flex u-f-justify-center u-m-r-xs">
          <span class="o-svg-icon o-svg-icon--xl u-c-red">
            <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M480 136.88v-30.37c0-16.97-6.74-33.25-18.74-45.26l-42.51-42.51A64.037 64.037 0 00373.49 0H174.48C157.64 0 144 14.33 144 32v104.88c-9.45-5.5-20.28-8.88-32-8.88H64c-35.35 0-64 28.65-64 64v256c0 35.35 28.65 64 64 64h48c15.22 0 29.01-5.54 40-14.41 10.99 8.87 24.78 14.41 40 14.41h256c35.35 0 64-28.65 64-64V192c0-23.63-12.95-44.04-32-55.12zM128 448c0 8.82-7.18 16-16 16H64c-8.82 0-16-7.18-16-16V192c0-8.82 7.18-16 16-16h48c8.82 0 16 7.18 16 16v256zm64-400h176v48c0 8.84 7.16 16 16 16h48v80H192V48zm272 400c0 8.82-7.18 16-16 16H192c-8.82 0-16-7.18-16-16V240h288v208zM352 336h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16zm-96 96h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16zm0-96h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16zm96 96h32c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16z" fill="currentColor" />
              </svg>
          </span>
        </div>
        <div class="o-media__body">
          <!-- Fax number -->
          <span class="phone-fax u-c-black tertiary-link--large u-m-r-xxs" aria-label="Fax number" aria-describedby="fax-label-99">718-670-2000</span>
          <span class="phone-info u-text-italic u-text-light u-c-gray-dark">
            <!-- Optional label - requires unique id -->
            <span id="fax-label-99" class="phone-label">Pulmonary Rehabilitation</span>
          </span>
        </div>
      </div>

      <div class="contact-info contact-info--email o-media o-media--sm">
        <div class="o-media__img u-d-flex u-f-justify-center u-m-r-xs">
          <span class="o-svg-icon o-svg-icon--xl u-c-red">
            <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z" fill="currentColor" />
              </svg>
          </span>
        </div>
        <div class="o-media__body">
          <span class="u-text-semibold u-m-r-xs">
            <a class="tertiary-link tertiary-link--large" href="mailto:[email protected]" aria-describedby="email-label-99">[email protected]</a>
          </span>
          <span class="email-info u-text-italic u-text-light u-c-gray-dark">
            <!-- Optional label - requires unique id -->
            <span id="email-label-99" class="email-label">Pulmonary Rehabilitation</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Profile cards can be link out to physician's profile page. The link is attached to the physician's name and uses a Cover Link object to make whole card clickable. Profile Card also uses slightly modified version of Media object for image and name.

Specialties

Cardiothoracic Surgery

+15 more

Affiliations

NewYork-Presbyterian/Columbia

<div class="c-card c-card--profile o-cover-link c-demo-box--card">
  <div class="c-card__header">
    <div class="o-media">
      <!-- Photo of Doctor -->
      <img class="o-media__img" src="/images/placeholder/doctor-300x300.jpg" alt="Dr. Christopher Morgan" style="width: 80px; height: 80px;">
      <div class="o-media__body">
        <p class="u-m-b-0">
          <a href="http://nyp.org" class="profile-name o-cover-link__overlay u-text-semibold tertiary-link">Dr. Christopher Morgan</a>
        </p>
        <span class="profile-title">MD</span>
      </div>
    </div>
  </div>
  <div class="c-card__body">
    <div class="c-card--profile__specialties u-m-b-sm u-b-b u-b-gray-medium">
      <p class="nyp-type-eyebrow--small u-m-b-xs">
        <span class="o-svg-icon o-svg-icon--xl u-c-red u-m-r-xxs">
          <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
              <path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z" fill="currentColor" />
            </svg>
        </span>
        Specialties
      </p>
      <p class="u-m-b-xxs">Cardiothoracic Surgery</p>
      <p class="plus-copy">+15 more</p>
    </div>
    <div class="c-card--profile__affiliations">
      <p class="nyp-type-eyebrow--small u-m-b-xs">
        <span class="o-svg-icon o-svg-icon--xl u-c-red u-m-r-xxs">
          <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
              <path d="M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 00-6-6h-20a6 6 0 00-6 6v26h-26a6 6 0 00-6 6v20a6 6 0 006 6h26v26a6 6 0 006 6h20a6 6 0 006-6V96h26a6 6 0 006-6V70a6 6 0 00-6-6z" fill="currentColor" />
            </svg>
        </span>
        Affiliations
      </p>
      <p class="u-m-b-xxs">NewYork-Presbyterian/Columbia</p>
      <!-- plus-copy, if necessary -->
    </div>
  </div>
</div>

If no physician headshot is available, the profile card generic icon is shown.

Specialties

Cardiothoracic Surgery of the Lorem Ipsum

+15 more

Affiliations

NewYork-Presbyterian/Weill Cornell

<div class="c-card c-card--profile o-cover-link c-demo-box--card">
  <div class="c-card__header">
    <div class="o-media">
      <!-- If no photo, show icon -->
      <div class="o-media__img o-media__img--icon" style="width: 80px; height: 80px;">
        <span class="o-svg-icon">
          <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
              <path fill="#d0d0d1" d="M0 0h512v512H0z"/><path fill="#ffffff" d="M135.8 162.8c0-66.4 53.8-120.2 120.2-120.2s120.2 53.8 120.2 120.2S322.4 283 256 283s-120.2-53.8-120.2-120.2zm330.5 276.5c0-3.2-.1-6.3-.3-9.4V428h-.2c-5.5-62.3-56.6-111.3-119.7-114.4v46c34.3 6.9 60.1 37.4 60.1 73.6v39.2c0 7.1-5.1 13.3-12.1 14.7l-30.2 6c-4 .8-8-1.8-8.8-5.9l-2.9-14.7c-.8-4 1.8-8.1 5.9-8.8l18.1-3.7v-26.8c0-59-90.1-61.1-90.1 1.8v25.1l18.1 3.7c4 .8 6.7 4.8 5.9 8.8l-2.9 14.7c-.8 4-4.8 6.7-8.8 5.9l-29.3-3.9c-7.4-1-13-7.3-13-14.9v-41.1c0-36.2 25.8-66.6 60.1-73.6v-42.4c-2.1.7-4.1 1-6.2 1.8-16.9 5.9-35 9.2-53.9 9.2s-37-3.3-53.9-9.2c-6.9-2.4-14-3.9-21.2-4.9v76.6c21.7 6.5 37.6 26.4 37.6 50.1 0 29-23.6 52.6-52.6 52.6s-52.6-23.6-52.6-52.6c0-23.8 15.9-43.7 37.6-50.1v-75.5c-59.7 10-105.3 61.5-105.3 124V535H75v-13.6c4 1.3 8.3 2 12.7 2h336.6c3.3 0 6.6-.4 9.7-1.1v7.7h32v-43.3c.2-1.7.3-3.5.3-5.3v-42.1zm-323 1.5c0 12.5 10 22.5 22.5 22.5s22.5-10 22.5-22.5-10-22.5-22.5-22.5-22.5 10-22.5 22.5z"/>
            </svg>
        </span>
      </div>
      <div class="o-media__body">
        <p class="u-m-b-0">
          <a href="http://nyp.org" class="profile-name o-cover-link__overlay u-text-semibold tertiary-link">Dr. Christopher Robscheit-Robbswanson Sandowrth</a>
        </p>
        <span class="profile-title">MD, DScPT, DPM</span>
      </div>
    </div>
  </div>
  <div class="c-card__body">
    <div class="c-card--profile__specialties u-m-b-sm u-b-b u-b-gray-medium">
      <p class="nyp-type-eyebrow--small u-m-b-xs">
        <span class="o-svg-icon o-svg-icon--xl u-c-red u-m-r-xxs">
          <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
              <path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z" fill="currentColor" />
            </svg>
        </span>
        Specialties
      </p>
      <p class="u-m-b-xxs">Cardiothoracic Surgery of the Lorem Ipsum</p>
      <p class="plus-copy">+15 more</p>
    </div>
    <div class="c-card--profile__affiliations">
      <p class="nyp-type-eyebrow--small u-m-b-xs">
        <span class="o-svg-icon o-svg-icon--xl u-c-red u-m-r-xxs">
          <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
              <path d="M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 00-6-6h-20a6 6 0 00-6 6v26h-26a6 6 0 00-6 6v20a6 6 0 006 6h26v26a6 6 0 006 6h20a6 6 0 006-6V96h26a6 6 0 006-6V70a6 6 0 00-6-6z" fill="currentColor" />
            </svg>
        </span>
        Affiliations
      </p>
      <p class="u-m-b-xxs">NewYork-Presbyterian/Weill Cornell</p>
      <!-- plus-copy, if necessary -->
    </div>
  </div>
</div>

A generic version of the Profile Card is also available. It is not set up to be linkable and uses different layout for content.

Hometown

Brooklyn, N.Y.

Medical School

NYIT College of Osteopathic Medicine

Hobbies & Interests

Basketball, football, hiking, indoor rock climbing, weight lifting, anime, horror, action, and comedy movies, video games, and the piano. Interested in traveling, but more so in paying off these loans.

<div class="c-card c-card--profile c-demo-box--card">
  <div class="c-card__header">
    <div class="o-media">
      <!-- Headshot -->
      <img class="o-media__img" src="/images/placeholder/doctor-300x300.jpg" alt="Dr. Christopher Morgan" style="width: 80px; height: 80px;">
      <div class="o-media__body">
        <p class="profile-name u-m-b-0 u-text-semibold">Waqar Khalid, DO</p>
      </div>
    </div>
  </div>
  <div class="c-card__body">
    <div class="c-card--profile__hometown u-m-b-sm">
      <p class="nyp-type-eyebrow--small u-m-b-xs">Hometown</p>
      <p class="u-m-b-xxs">Brooklyn, N.Y.</p>
    </div>
    <div class="c-card--profile__school">
      <p class="nyp-type-eyebrow--small u-m-b-xs">Medical School</p>
      <p class="u-m-b-xxs">NYIT College of Osteopathic Medicine</p>
    </div>
    <div class="c-card--profile__hobbies u-m-t-sm u-p-t u-b-t u-b-gray-medium">
      <p class="nyp-type-eyebrow--small u-m-b-xs">Hobbies & Interests</p>
      <p class="u-m-b-xxs">Basketball, football, hiking, indoor rock climbing, weight lifting, anime, horror, action, and comedy movies, video games, and the piano. Interested in traveling, but more so in paying off these loans.</p>
    </div>
  </div>
</div>

Square Photo Card

This card is used primarily in the Patient Stories component but it can be used alone.

The first example is how the Square Photo card used in Patient Stories.

The second example adds a show-body class to the card that will show the link at all times and adds a subtle box shadow. This is how the card should be use outside of the Patient Stories component.

Dr. Benjamin Carey, Jr III

Trenia Hill

<div class="o-grid-pack">
  <div class="o-grid o-grid-pack__grid">
    <div class="o-grid__item-6 o-grid__item-4@md">

      <div class="c-card c-card--square-photo ">
        <!-- Wrap content in link if necessary -->
        <a href="#">
          <div class="o-ar o-ar--1:1">
            <div class="o-ar__item">
              <img src="/images/placeholder/ps-benjamin.jpg" alt="">
            </div>
          </div>
          <div class="c-card__body">
            <p class="u-c-white nyp-type-h5">Dr. Benjamin Carey, Jr III</p>
          </div>
        </a>
      </div>

    </div>
    <div class="o-grid__item-6 o-grid__item-4@md">

      <div class="c-card c-card--square-photo show-body">
        <!-- Wrap content in link if necessary -->
        <a href="#">
          <div class="o-ar o-ar--1:1">
            <div class="o-ar__item">
              <img src="/images/placeholder/ps-trenia.jpg" alt="">
            </div>
          </div>
          <div class="c-card__body">
            <p class="u-c-white nyp-type-h5">Trenia Hill</p>
          </div>
        </a>
      </div>

    </div>
  </div>
</div>

Category Card

Specifications:

Only use 2-up grid
Card image recommended size is 640x360 (16:9)
Image will be aligned to the top and centered
Try to keep the text below the title at two (2) lines at a 1280px wide screen size
Optional: Add remove-overlay class to remove dark overlay. Not recommended.
See Category Card Grid

Advances for Medical Professionals

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Advances for Medical Professionals and Medical Technology

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est provident numquam aliquid asperiores. Veritatis eum quaerat libero asperiores at odio consequatur quibusdam, magni

More Information

NYP News

<div class="category-cards__grid o-grid-pack">
  <div class="o-grid o-grid-pack__grid">
    <div class="o-grid__item-12 o-grid__item-6@lg">
      <div class="c-card c-category-card o-cover-link u-f-justify-end " style="background-image: url(/images/placeholder/category-card-1.jpg);">
        <div class="c-category-card__container">
          <div class="c-category-card__content u-d-flex u-f-align-end">
            <div class="c-category-card__content-wrapper u-d-flex u-w-100">
              <div class="c-category-card__title u-d-flex u-f-justify-between u-w-100">
                <a href="#" class="o-cover-link__overlay u-c-white u-text-semibold">Advances for Medical Professionals</a>
                <div class="c-category-card__arrow u-d-flex u-f-align-end">
                  <span class="o-svg-icon o-svg-icon--xl">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" fill="currentColor"/>
                      </svg>
                  </span>
                </div>
              </div>
              <div class="c-category-card__text u-d-flex u-f-align-end u-w-100 u-c-white">
                <!-- WYSIWYG -->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="o-grid__item-12 o-grid__item-6@lg">
      <div class="c-card c-category-card o-cover-link u-f-justify-end " style="background-image: url(/images/placeholder/category-card-2.jpg);">
        <div class="c-category-card__container">
          <div class="c-category-card__content u-d-flex u-f-align-end">
            <div class="c-category-card__content-wrapper u-d-flex u-w-100">
              <div class="c-category-card__title u-d-flex u-f-justify-between u-w-100">
                <a href="#" class="o-cover-link__overlay u-c-white u-text-semibold">Advances for Medical Professionals and Medical Technology</a>
                <div class="c-category-card__arrow u-d-flex u-f-align-end">
                  <span class="o-svg-icon o-svg-icon--xl">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" fill="currentColor"/>
                      </svg>
                  </span>
                </div>
              </div>
              <div class="c-category-card__text u-d-flex u-f-align-end u-w-100 u-c-white">
                <!-- WYSIWYG -->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est provident numquam aliquid asperiores. Veritatis eum quaerat libero asperiores at odio consequatur quibusdam, magni</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="o-grid__item-12 o-grid__item-6@lg">
      <div class="c-card c-category-card o-cover-link u-f-justify-end " style="background-image: url(/images/placeholder/category-card-3.jpg);">
        <div class="c-category-card__container">
          <div class="c-category-card__content u-d-flex u-f-align-end">
            <div class="c-category-card__content-wrapper u-d-flex u-w-100">
              <div class="c-category-card__title u-d-flex u-f-justify-between u-w-100">
                <a href="#" class="o-cover-link__overlay u-c-white u-text-semibold">More Information</a>
                <div class="c-category-card__arrow u-d-flex u-f-align-end">
                  <span class="o-svg-icon o-svg-icon--xl">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" fill="currentColor"/>
                      </svg>
                  </span>
                </div>
              </div>
              <div class="c-category-card__text u-d-flex u-f-align-end u-w-100 u-c-white">
                <!-- WYSIWYG -->
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="o-grid__item-12 o-grid__item-6@lg">
      <div class="c-card c-category-card o-cover-link u-f-justify-end " style="background-image: url(/images/placeholder/category-card-4.jpg);">
        <div class="c-category-card__container">
          <div class="c-category-card__content u-d-flex u-f-align-end">
            <div class="c-category-card__content-wrapper u-d-flex u-w-100">
              <div class="c-category-card__title u-d-flex u-f-justify-between u-w-100">
                <a href="#" class="o-cover-link__overlay u-c-white u-text-semibold">NYP News</a>
                <div class="c-category-card__arrow u-d-flex u-f-align-end">
                  <span class="o-svg-icon o-svg-icon--xl">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z" fill="currentColor"/>
                      </svg>
                  </span>
                </div>
              </div>
              <div class="c-category-card__text u-d-flex u-f-align-end u-w-100 u-c-white">
                <!-- WYSIWYG -->
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

Card

Generic Card

Headline goes here

Card with Cover Link

This card has an optional cover link.

Variations

With Shadow

This card has a shadow.

Centered

Headline goes here

Headline goes here

Accolades Card

Contact Card

NYP Office of Lorem Ipsum

Profile Card - Physician

Profile Card - Generic

Square Photo Card

Category Card