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:
Card HTML Layout
A basic card HTML layout:
<div class="card">: Card container
<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 ExampleTest it Now
List View with Cards
You can use cards as list view elements by adding cards-list class to <div class = "list-block">.
ExampleTest it Now