Ionic Cards

In recent years, the use of cards has become increasingly popular, providing a better tool for organizing and displaying information.

For mobile applications, cards automatically adapt to the screen size.

We can flexibly control the display effects of cards, and even achieve animation effects.

Cards are typically placed at the top of the page, but they can also be switched left and right.

<div class="card">
  <div class="item item-text-wrap">
    Basic card, containing text information.
  </div>
</div>

Try it »

The default style of cards includes a box-shadow, but similar elements like list list-inset do not have shadows due to performance reasons.

If you have many cards, each with many child elements, it is recommended to use inset lists.

Card Headers and Footers

We can add headers and footers to cards by adding the item-divider class:

<div class="card">
  <div class="item item-divider">
    Card Header!
  </div>
  <div class="item item-text-wrap">
    Basic card, containing text information.
  </div>
  <div class="item item-divider">
    Card Footer!
  </div>
</div>

Try it »

Card List

Use the list card class to set up a card list:

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Try it »

Card with Images

Using images in cards enhances the visual appeal, as shown in the following example:

<div class="list card">

  <div class="item item-avatar">
    <img decoding="async" src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img decoding="async" src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Try it »

Here is the result:

Card Display

The following example demonstrates several ways to display cards. It starts with a list card element and uses item-avatar and item-body elements to display images and text information, with item-divider classes for the footer.

<div class="list card">

  <div class="item item-avatar">
    <img decoding="async" src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>

<div class="item item-body">
  <img decoding="async" class="full-image" src="delorean.jpg">
  <p>
    tutorialpro.org -- Not just learning technology, but also dreams!<br>
    tutorialpro.org -- Not just learning technology, but also dreams!<br>
    tutorialpro.org -- Not just learning technology, but also dreams!<br>
    tutorialpro.org -- Not just learning technology, but also dreams!
  </p>
  <p>
    <a href="#" class="subdued">1 Like</a>
    <a href="#" class="subdued">5 Comments</a>
  </p>
</div>

<div class="item tabs tabs-secondary tabs-icon-left">
  <a class="tab-item" href="#">
    <i class="icon ion-thumbsup"></i>
    Like
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-chatbox"></i>
    Comment
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-share"></i>
    Share
  </a>
</div>

Try it »

Here is the result: