Cards

Cards have become widely used in recent years. They're are a great way to contain and organize information, while also setting up predictable expectations for the user. With so much content to display at once, and often so little screen realestate, cards have fast become the design pattern of choice for many companies, including the likes of Google, Twitter, and Spotify..

For mobile experiences, Cards make it easy to display the same information visually across many different screen sizes. They allow for more control, are flexible, and can even be animated. Cards are usually placed on top of one another, but they can also be used like a "page" and swiped between, left and right.

<divclass="card"><divclass="item item-text-wrap">     This is a basic Card which contains an item that has wrapping text.   </div></div>

Cards add a box-shadow by default, whereas it's cousin list list-inset does not. For performance reasons, when scrolling a large card with many items its recommended to use inset lists instead.

Card Headers and Footers

Cards can be customized similarly to how you would fill a normal screen. For example, a card can easily have Headers and Footers placed inside of them. Add the item-divider classname above or below the content within the card element.

<divclass="card"><divclass="item item-divider">     I'm a Header in a Card!   </div><divclass="item item-text-wrap">     This is a basic Card with some text.   </div><divclass="item item-divider">     I'm a Footer in a Card!   </div></div>

Card Lists

Use the list card classname to create a card with lists.

<divclass="list card"><ahref="#"class="item item-icon-left"><iclass="icon ion-home"></i>     Enter home address   </a><ahref="#"class="item item-icon-left"><iclass="icon ion-ios-telephone"></i>     Enter phone number   </a><ahref="#"class="item item-icon-left"><iclass="icon ion-wifi"></i>     Enter wireless password   </a><ahref="#"class="item item-icon-left"><iclass="icon ion-card"></i>     Enter card information   </a></div>

Card Images

Images look great in cards, and can be combined with lists and other elements.

<divclass="list card"><divclass="item item-avatar"><imgsrc="avatar.jpg"><h2>Pretty Hate Machine</h2><p>Nine Inch Nails</p></div><divclass="item item-image"><imgsrc="cover.jpg"></div><aclass="item item-icon-left assertive"href="#"><iclass="icon ion-music-note"></i>     Start listening   </a></div>

Card Showcase

Here is a showcase of a card using several different items. It begins with the list card element, utilizing the item-avatar list item, an item-bodyelement for images and text, and a footer with the item-divider classname.

<divclass="list card"><divclass="item item-avatar"><imgsrc="mcfly.jpg"><h2>Marty McFly</h2><p>November 05, 1955</p></div><divclass="item item-body"><imgclass="full-image"src="delorean.jpg"><p>       This is a "Facebook" styled Card. The header is created from a Thumbnail List item,       the content is from a card-body consisting of an image and paragraph text. The footer       consists of tabs, icons aligned left, within the card-footer.     </p><p><ahref="#"class="subdued">1 Like</a><ahref="#"class="subdued">5 Comments</a></p></div><divclass="item tabs tabs-secondary tabs-icon-left"><aclass="tab-item"href="#"><iclass="icon ion-thumbsup"></i>       Like     </a><aclass="tab-item"href="#"><iclass="icon ion-chatbox"></i>       Comment     </a><aclass="tab-item"href="#"><iclass="icon ion-share"></i>       Share     </a></div></div>