Framework7 Cards

Framework7 Cards are used to contain organized information of a single subject like a photo, link, and text.

Cards are mainly used along with List View to contain and organize your information.

There are 2 types of framework7 cards:

1. Card HTML Layout: The basic card HTML layout uses card classes to arrange its items.
2. List View With Cards: You can use cards as list view elements by adding cards-list class to <div class="list-block">.

Card HTML Layout

A basic card HTML layout:

Here:

<div class="card">: Card container

• <div class="card-header">: Card header. Mostly used to display card title. Optional.
• <div class="card-footer">: Card footer is used for some additional information or for custom actions/links. Optional.
• <div class="card-content">: Main container for card content. Required.
=

<div class="card-content-inner">: Additional inner wrapper. Used to add additional padding to card-content. Optional.

The card HTML Layout contains several classes:

Note: Both the card-header and the card-footer has flexbox layout where items have center vertical alignment. If you want to order your items to top or to bottom of header/footer, you can use valign attribute.

Card HTML Layout Example

List View with Cards

You can use cards as list view elements by adding cards-list class to <div class = "list-block">.

Example