Ionic Cards

In recent years, card applications have become increasingly popular. Cards provide a better tool for organizing information display.

For mobile applications, cards adapt their size according to the screen size.

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

Cards are generally placed at the top of the page, and of course they can also implement left-right switching functionality.

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

Try it »

Cards have a default style with box-shadow. Due to performance reasons, similar elements like list list-inset do not have a shadow.

If you have many cards, and each card has many child elements, it is recommended to use an inset list.

Card Header and Footer

We can add a header and footer to cards by adding the item-divider class:

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

Try it »

Card List

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

<div class="list card">

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

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

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

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

</div>

Try it »

Cards with Images

Using images in cards will have a better effect. Example below:

<div class="list card">

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

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

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

</div>

Try it »

The running effect is as follows:

Card Display

The following example uses several different options for displaying cards. It starts with the list card element, and uses item-avatar and item-body elements to display images and text information, and uses the item-divider class at the bottom.

<div class="list card">

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

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg.html">
    <p>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！<br>
      Example -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="../index.html" class="subdued">1 喜欢</a>
      <a href="../index.html" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="../index.html">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-chatbox"></i>
      评论
    </a>
    <a class="tab-item" href="../index.html">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

Try it »

The running effect is as follows:

Other Extensions