Chips

    Chips (Tags) represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information.

    Let’s look at basic chip HTML layout

    • - Chip container

      • <div class="chip-media"> - Chip “media” element, can contain image/avatar or icon. Optional

      • <a class="chip-delete"> - Chip delete icon-link. Optional

      • chip-outline - additional class that can be added to chip element to make it outline

    1. :root {
    2.   --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
    3.   --f7-chip-font-size: 13px;
    4.   --f7-chip-font-weight: normal;
    5.   --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
    6.   --f7-chip-media-font-size: 16px;
    7.   --f7-chip-delete-button-color: #000;
    8. }
    9. :root .theme-dark,
    10. :root.theme-dark {
    11.   --f7-chip-delete-button-color: #fff;
    12.   --f7-chip-bg-color: #333;
    13.   --f7-chip-outline-border-color: #333;
    14. }
    15. .ios {
    16.   --f7-chip-text-color: #000;
    17.   --f7-chip-height: 24px;
    18.   --f7-chip-padding-horizontal: 10px;
    19. }
    20. .ios .theme-dark,
    21. .ios.theme-dark {
    22.   --f7-chip-text-color: #fff;
    23. }
    24. .md {
    25.   --f7-chip-text-color: rgba(0, 0, 0, 0.87);
    26.   --f7-chip-height: 32px;
    27.   --f7-chip-padding-horizontal: 12px;
    28. }
    29. .md .theme-dark,
    30. .md.theme-dark {
    31.   --f7-chip-text-color: rgba(255, 255, 255, 0.87);
    32. }
    33. .aurora {
    34.   --f7-chip-text-color: #000;
    35.   --f7-chip-padding-horizontal: 10px;
    36.   --f7-chip-font-size: 12px;
    38. }
    39. .aurora .theme-dark,
    40. .aurora.theme-dark {
    41.   --f7-chip-text-color: #fff;
    42. }
    1. <div class="block-title">Outline Chips</div>
    2. <div class="block block-strong">
    3.   <div class="chip chip-outline">
    4.     <div class="chip-label">Example Chip</div>
    5.   </div>
    6.   <div class="chip chip-outline">
    7.     <div class="chip-label">Another Chip</div>
    8.   </div>
    9.   <div class="chip chip-outline">
    10.     <div class="chip-label">One More Chip</div>
    11.   </div>
    12.   <div class="chip chip-outline">
    13.     <div class="chip-label">Fourth Chip</div>
    14.   </div>
    15.   <div class="chip chip-outline">
    16.     <div class="chip-label">Last One</div>
    17.   </div>
    18. </div>
    1. <div class="block-title">Contact Chips</div>
    2. <div class="block block-strong">
    3.   <div class="chip">
    4.     <div class="chip-media"><img src="https://cdn.framework7.io/placeholder/people-64x64-9.jpg"/></div>
    5.     <div class="chip-label">Jane Doe</div>
    6.   </div>
    7.   <div class="chip">
    8.     <div class="chip-media"><img src="https://cdn.framework7.io/placeholder/people-64x64-9.jpg"/></div>
    9.     <div class="chip-label">John Doe</div>
    10.   </div>
    11.   <div class="chip">
    12.     <div class="chip-media"><img src="https://cdn.framework7.io/placeholder/people-64x64-9.jpg"/></div>
    13.     <div class="chip-label">Adam Smith</div>
    14.   </div>
    15.   <div class="chip">
    16.     <div class="chip-media bg-color-pink">J</div>
    17.   </div>
    19.     <div class="chip-media bg-color-yellow text-color-black">C</div>
    20.     <div class="chip-label">Chris</div>
    21.   </div>
    22.   <div class="chip">
    23.     <div class="chip-media bg-color-red">K</div>
    24.     <div class="chip-label">Kate</div>
    25.   </div>
    26. </div>
    1. <div class="block-title">Color Chips</div>
    2. <div class="block block-strong">
    3.   <div class="chip color-red">
    4.     <div class="chip-label">Red Chip</div>
    5.   </div>
    6.   <div class="chip color-green">
    7.     <div class="chip-label">Green Chip</div>
    8.   </div>
    9.   <div class="chip color-blue">
    10.     <div class="chip-label">Blue Chip</div>
    11.   </div>
    12.   <div class="chip color-orange">
    13.     <div class="chip-label">Orange Chip</div>
    14.   </div>
    15.   <div class="chip color-pink">
    16.     <div class="chip-label">Pink Chip</div>
    17.   </div>
    18.   <div class="chip chip-outline color-red">
    19.     <div class="chip-label">Red Chip</div>
    20.   </div>
    21.   <div class="chip chip-outline color-green">
    22.     <div class="chip-label">Green Chip</div>
    23.   </div>
    24.   <div class="chip chip-outline color-blue">
    25.     <div class="chip-label">Blue Chip</div>
    26.   </div>
    27.   <div class="chip chip-outline color-orange">
    28.     <div class="chip-label">Orange Chip</div>
    29.   </div>
    30.   <div class="chip chip-outline color-pink">
    31.     <div class="chip-label">Pink Chip</div>
    32.   </div>