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
Headline goes here
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
This card has an optional cover link.
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 & 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
This card has a shadow.
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 & 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
Headline goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Headline goes here
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
Recognized 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>Recognized for labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
Contact Card
NYP Office of Lorem Ipsum
Mailing Address
Contact
718-670-2000
ext. 1234
Cardiac Rehabilitation
718-670-2000
Pulmonary Rehabilitation
loremipsum@nyp.org
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"/>
</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" />
</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" />
</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="phone-extension-99 phone-label-99">718-670-2000</span>
<span class="phone-info u-text-italic u-text-light u-c-gray-dark">
<!-- Optional phone extention - requires unique id -->
<!-- Optional label - requires unique id -->
<span id="phone-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" />
</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:loremipsum@nyp.org" aria-describedby="email-label-99">loremipsum@nyp.org</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 Card - Physician
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" />
</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" />
</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.
Dr. Christopher Robscheit-Robbswanson Sandowrth
MD, DScPT, DPMSpecialties
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"/>
</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" />
</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" />
</span>
Affiliations
</p>
<p class="u-m-b-xxs">NewYork-Presbyterian/Weill Cornell</p>
<!-- plus-copy, if necessary -->
</div>
</div>
</div>
Profile Card - Generic
A generic version of the Profile Card is also available. It is not set up to be linkable and uses different layout for content.
Waqar Khalid, DO
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.
<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>