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
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>
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">
<!-- Image not needed for Profile card -->
<div class="c-card__header">
<!-- Headline (h3) not needed for Profile Card; replaced with Media object -->
<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>
<!-- Footer not needed for Profile card -->
</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">
<!-- Image not needed for Profile card -->
<div class="c-card__header">
<!-- Headline (h3) not needed for Profile Card; replaced with Media object -->
<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">
<style>.st1{fill:#f6f6f6}</style><path fill="#d0d0d1" d="M256 0C27.9-8.1-87.5 298.7 82.6 444.3c-5-71.9 3.4-146.1 86.8-161.7v62.2c-46.9 13.2-36.9 85.2 12.4 84.7 49.3.5 59.3-71.5 12.4-84.7v-63.2c42 10.8 68.3 18.2 111.5 2.6v35c-28.3 5.8-49.5 30.8-49.5 60.7v33.9c0 6.3 4.6 11.5 10.7 12.3l24.2 3.3c8.7 1.9 8.1-12 9.7-17 2-9.2-14.7-8.4-19.8-10.3v-20.7c0-51.9 74.3-50.1 74.3-1.5V402c-5.1 1.9-21.9 1-19.8 10.3 1.6 5 1 19.1 9.7 17l24.9-5c5.8-1.2 10-6.3 10-12.2v-32.3c0-29.9-21.3-55-49.5-60.7v-37.9c91.6 7.7 105.3 86.3 99.1 163.1C599.6 298.6 484-8.1 256 0zm-55.7 386.1c-.1 24.3-37.1 24.3-37.2 0 .1-24.3 37.1-24.3 37.2 0zM256 256c-130.3-2.2-130.2-196 0-198.2 130.3 2.2 130.2 196 0 198.2z"/><path d="M330.3 281.2v37.9c28.3 5.7 49.5 30.8 49.5 60.7v32.3c0 5.9-4.2 11-10 12.2l-24.9 5c-3.3.7-6.6-1.5-7.3-4.9-5.5-22-1.6-18.2 17.4-22.5v-22.1c0-48.6-74.3-50.4-74.3 1.5V402c5.2 1.9 21.8 1.1 19.8 10.3-1.6 5-1 18.9-9.7 17l-24.2-3.3c-6.1-.9-10.7-6-10.7-12.3v-33.9c0-29.9 21.3-54.9 49.5-60.7v-35c-43.2 15.6-69.5 8.3-111.5-2.6v63.2c46.9 13.2 36.9 85.2-12.4 84.7-49.3.5-59.3-71.5-12.4-84.7v-62.2c-83.4 15.7-91.7 89.9-86.8 161.7 89.3 89 257.5 89 346.8 0 6.6-76.7-7.3-155.3-98.8-163zM256 57.8c-130.3 2.2-130.2 196 0 198.2 130.3-2.2 130.2-196 0-198.2z" class="st1"/><path d="M163.1 386.1c.1 24.3 37.1 24.3 37.2 0-.1-24.3-37.1-24.3-37.2 0z" class="st1"/>
</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>
<!-- Footer not needed for Profile card -->
</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">
<!-- Image not needed for Profile card -->
<div class="c-card__header">
<!-- Headline (h3) not needed for Profile Card; replaced with Media object -->
<div class="o-media">
<!-- Headshot -->
<img class="o-media__img" src="/images/placeholder/profile-generic-headshot.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>
<!-- Footer not needed for Profile card -->
</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>