ionic card

In recent years, the application of cards has become more and more popular. Cards provide a tool for better organizing information display.

For mobile applications, the card will adapt its size according to the screen size.

We can flexibly control the display effect of the card and even achieve animation effects.

Cards are generally placed at the top of the page, but of course the left and right switching function can also be achieved.

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

The default style of card has box-shadow. Due to performance reasons, similar elements like list list-inset do not have shadows.

If you have a lot of cards, and each card has many sub-elements, it is recommended to use an inset list.

The head and bottom of the card

We can add the head and bottom to the card 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>

Card list

Use the list card class to set the 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>

Card with picture

Use pictures in the card, the effect will be better, the example is as follows:

<div class="list card">

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

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

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

</div>

The running effect is as follows:

Card Display

The following examples use several different options for card display. Started using the list card element, and used item-avatar, item-body elements to display images and text information, and the item-divider class at the bottom.

<div class="list card">

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

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

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </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>
      分享
    </a>
  </div>

</div>

The running effect is as follows: