Skip to main content

Cards

    Cards

    A Card is a common, basic user interface component to organize content into distinct elements.

    Links:

    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.

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

    Learn More

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

    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.

    <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

    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>