Framework7 Chips - Framework7

What are Chips in Framework7?


Chip is a small block of entity which can contain a photo, small string of title and short information.

Chips HTML Layout

Below code shows the basic chip HTML layout used in Framework7:

Above HTML layout contains many classes as mentioned below:

  • chips - This is the chip container.
  • chip-media - This is a chip media element that can contain images, avatar or icon and is optional.
  • card-label - This is a chip text label.
  • card-delete - This is the optional delete icon link of a chip.


Below example represents the entities such as albums, card elements etc along with a photo and brief information:


Below are the steps to see how 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 gets displayed.
  • This example represents the complex entities in small blocks such as albums, card elements, posted image which contain photo, title string and brief information.

Card HTML Layout

Simple Cards

Card header

Card Footer

Another card

Styled Cards

Beautiful Mountains

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

Framework7 Topics