Basic 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.
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 Content
The card component comes with a few elements you can use in different contexts and mix and match with different elements.
Card Body
You can place a card with body content only, with a few default card elements for content (which can also be used in c-card__header and c-card__footer as well).
White card on gray background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
<div class="c-card u-bg-white">
<div class="c-card__body">
<h3 class="c-card__title">White card on gray background</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<p><a href="#" class="styled-link">Learn More</a></p>
</div>
</div>
Card Header
If you'd like to have a card header element offset from the card body, you can use a couple of utility classes to create a stand alone header.
Recognized for labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation.
<div class="c-card">
<div class="c-card__header u-p-b u-bg-gray-light u-b-b u-b-gray-medium">
<h3 class="c-card__title">Recognized for labore et dolore magna aliqua.</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. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
Card Footer
If you'd like to have a card footer element offset from the card body, you can use a couple of utility classes to create a stand alone footer (just like the card header). You can also use the grid or lists objects to format call-to-actions.
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__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 u-p-t u-bg-white u-b-t u-b-gray-medium">
<div class="o-list-pack">
<ul class="o-list-pack__list">
<li class="o-list-pack__item">
<a href="#" class="c-button">Yes Please</a>
</li>
<li class="o-list-pack__item">
<a href="#" class="c-button c-button--naked">No Thanks</a>
</li>
</ul>
</div>
</div>
</div>
Cards and Grid Packs
Combine the grid object and the o-grid-pack object around your o-grid to create packs of cards with default margins applied.
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Headline goes here
But you have to build the framework first.
<div class="o-grid-pack">
<div class="o-grid o-grid-pack__grid">
<div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md">
<article class="c-card">
<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">Sign up</a>
</div>
</article>
</div>
<div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md">
<article class="c-card">
<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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</article>
</div>
<div class="o-grid__item-12 o-grid__item-6@sm o-grid__item-4@md">
<article class="c-card">
<div class="c-card__header">
<h3 class="c-card__title">Headline goes here</h3>
</div>
<div class="c-card__body">
<p>But you have to build the framework first.</p>
</div>
<div class="c-card__footer">
<a href="#" class="styled-link">Let's Enjoy Them!</a>
</div>
</article>
</div>
</div>
</div>
Cards Variations
Centered Card
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
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>