Framework7 Cards-Card HTML Layout - Framework7

What is card HTML Layout?

Description

A card HTML layout consists of many classes and is listed below:

S.N.

Classes & Description

1

Cards
This is the card container.

2

Card-header
This is the optional card header that is used to display card title.

3

Card-footer
This is optional and is used to specify additional information or custom links.

4

Card-content
This is the main container for content of the card and is required.

5

Card-content-inner
This is the optional additional inner wrapper that can be used for additional padding to content.

Both card-header and card-footer have a flexbox layout where items will have center vertical alignment. If the user wants to order items to top or to bottom of header/footer, then they can use valign attribute.

Example

Below example shows the use of cards HTML layouts in Framework7:

Output

Below are the steps to see how the above code works:

  • Save above HTML code as cards_html_layout.html file in the server root folder.
  • Open this HTML file as http://localhost/cards_html_layout.html and below output will be displayed.
  • This example defines the card layout that contains unique associated data, such as photo, text, link.
  • Simple Cards
  • Card header
  • Card Footer
  • Another card
  • Styled Cards
  • Beautiful Mountains

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics