Javatpoint Logo
Javatpoint Logo

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
Next TopicFramework7 Chips




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA