72

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:

Index	Class	Description
1)	cards	It is the card container.
2)	card-header	It is the optional card header that is used to display card title.
3)	card-footer	It is optional and used for specifying additional information or custom links.
4)	card-content	It is the main container for content of the card and is required.
5)	card-content-inner	It is the optional additional inner wrapper that is used for additional padding to content.

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

Test it Now

---

List View with Cards

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

Example

Test it Now