Cards

Cards, along with List View, is a great way to contain and orginize your information. Cards contain unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

Lets look at a basic card HTML layout

Where:

  • - 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 card-content-padding"> - Additional card-content-padding used to add extra padding to card-content

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

    • no-shadow - additional class that can be added to card element to remove its shadow

    • no-border - additional class that can be added to card element to remove its border (for outline card)

Note that “card-header” and “card-footer” have a flexbox layout (display:flex) where as items have a center vertical alignment. If you need to align items to top or to bottom of header/footer, then you may use additional typography classes, for example:

- align header items by header top line

- align footer items by footer bottom line

Expandable Cards

Expandable Cards (aka AppStore cards) is a subset of usual Cards which expand on click to full screen size on mobile and to larger size on tablet.

Expandable Cards Layout

It has a bit different and simplified layout:

  1. <!-- addition "card-expandable" class on card to make it expandable -->
  2. <div class="card card-expandable">
  3.   <!-- card content -->
  4.   <div class="card-content">
  5.     <!-- put all content here -->
  6.   </div>
  7. </div>

Where

  • card-expandable - addition class on card element to make it expandable
  • card-content - only place here to put any card content

So all the extra elements like card-content-padding, card-header, card-footer must be placed inside of card-content when card is expandable.

Expandable Card Size

By default expandable card opens to fixed size on tablet/desktops. To make expandable card to open to full screen size on tablet/desktop screen additional card-tablet-fullscreen class required on card element. Otherwise you can configure this size using --f7-card-expandable-tablet-width and --f7-card-expandable-tablet-height CSS variables.

Expandable card content (card-content) is set to 100vw width when collapsed (closed). It is done to improve card open/close transition performance, so you need to take care about its content positioning. You can make its content width also animatable and responsive by adding additional card-expandable-animate-width class to card element, but performance can be worse in this case.

Hide Elements On Open/Close

Expandable card has 2 states: closed and opened. And it is possible to hide/show card’s elements by using these two classes:

  • card-opened-fade-in - element with such class inside of card-content will have 0 opacity when card closed, and it will fade to 1 opacity on card open.
  • card-opened-fade-out - element with such class inside of card-content will have 1 opacity when card closed, and it will fade to 0 opacity on card open.

Prevent Card From Opening

In some layouts you may have a button or link in visible area or expandable card when it is collapsed. To allow click on such button or link and to prevent expandable card from opening, we need to add `card-prevent-open` class to this button:

  1. <div class="card card-expandable">
  2.   <div class="card-content">
  3.     ...
  4.     <!-- Add "card-prevent-open" to element and click on it won't open expandable card -->
  5.     <a href="#" class="button card-prevent-open">Button</a>
  6.   </div>
  7. </div>

Expandable Card Backdrop

If you have enabled expandable card backdrop (enabled by default, see parameters below), then it will automatically add backdrop element (darken overlay behind the card) on card open to card parent page.

  1. <div class="block">
  2.   <!-- custom backdrop element -->
  3.   <div class="card-backdrop custom-backdrop"></div>
  4.   <!-- pass its CSS selector in data-backdrop-el attribute -->
  5.   <div class="card card-expandable" data-backdrop-el=".custom-backdrop">
  6.     ...
  7.   </div>
  8. </div>

Let’s look at related App methods to work with expandable cards:

app.card.open(el, animate)- open expandable card

  • el - HTMLElement or string (with CSS Selector). Expandable card to open.
  • animate - boolean. Opens expandable card with animation. By default is true

app.card.close(el, animate)- close expandable card

  • el - HTMLElement or string (with CSS Selector). Expandable card to close.
  • animate - boolean. Closes expandable card with animation. By default is true

app.card.toggle(el, animate)- toggle expandable card

  • el - HTMLElement or string (with CSS Selector). Expandable card to toggle.
  • animate - boolean. Toggle expandable card with animation. By default is true

Card App Parameters

It is possible to control some default Cards behavior using global app parameters by passing Cards related parameters under card parameter:

For example:

  1. var app = new Framework7({
  2.   card: {
  3.     hideNavbarOnOpen: false,
  4.     closeByBackdropClick: false,
  5.   },
  6. });

In addition, all these paramteres can be set on each expandable card individually with same data- attributes, including additional data-animate attribute:

It is possible to open and close required expandable cards using special classes and data attributes on links:

  • To open expandable card we need to add “card-open“ class to any HTML element (prefered to link)

  • To close expandable we need to add “card-close“ class to any HTML element (prefered to link)

  • If you have more than one expandable cards in DOM, you need to specify appropriate card via additional data-card=”.my-card” attribute on this HTML element

Card Events

Expandable card will fire the following DOM events on card element and events on app instance:

App Instance Events

  1. :root {
  2.   --f7-card-bg-color: #fff;
  3.   --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  4.   --f7-card-border-radius: 4px;
  5.   --f7-card-font-size: inherit;
  6.   --f7-card-header-text-color: inherit;
  7.   --f7-card-header-font-weight: 400;
  8.   --f7-card-header-border-color: #e1e1e1;
  9.   --f7-card-footer-border-color: #e1e1e1;
  10.   --f7-card-footer-font-weight: 400;
  11.   --f7-card-footer-font-size: inherit;
  12.   --f7-card-expandable-bg-color: #fff;
  13.   --f7-card-expandable-font-size: 16px;
  14.   --f7-card-expandable-tablet-width: 670px;
  15.   --f7-card-expandable-tablet-height: 670px;
  16. }
  17. :root .theme-dark,
  18. :root.theme-dark {
  19.   --f7-card-bg-color: #1c1c1d;
  20.   --f7-card-expandable-bg-color: #1c1c1d;
  21.   --f7-card-outline-border-color: #282829;
  22.   --f7-card-header-border-color: #282829;
  23.   --f7-card-footer-border-color: #282829;
  24.   --f7-card-footer-text-color: #8E8E93;
  25. }
  26. .ios {
  27.   --f7-card-margin-horizontal: 10px;
  28.   --f7-card-margin-vertical: 10px;
  29.   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  30.   --f7-card-content-padding-horizontal: 15px;
  31.   --f7-card-content-padding-vertical: 15px;
  32.   --f7-card-header-font-size: 17px;
  33.   --f7-card-header-padding-vertical: 10px;
  34.   --f7-card-header-padding-horizontal: 15px;
  35.   --f7-card-header-min-height: 44px;
  36.   --f7-card-footer-text-color: #6d6d72;
  37.   --f7-card-footer-padding-vertical: 10px;
  38.   --f7-card-footer-padding-horizontal: 15px;
  39.   --f7-card-footer-min-height: 44px;
  40.   --f7-card-expandable-margin-horizontal: 20px;
  41.   --f7-card-expandable-margin-vertical: 30px;
  42.   --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  43.   --f7-card-expandable-tablet-border-radius: 5px;
  44.   --f7-card-expandable-header-font-size: 27px;
  45.   --f7-card-expandable-header-font-weight: bold;
  46. }
  48.   --f7-card-margin-horizontal: 8px;
  49.   --f7-card-margin-vertical: 8px;
  50.   --f7-card-box-shadow: var(--f7-elevation-1);
  51.   --f7-card-content-padding-horizontal: 16px;
  52.   --f7-card-content-padding-vertical: 16px;
  53.   --f7-card-header-font-size: 16px;
  54.   --f7-card-header-padding-vertical: 4px;
  55.   --f7-card-header-padding-horizontal: 16px;
  56.   --f7-card-header-min-height: 48px;
  57.   --f7-card-footer-text-color: #757575;
  58.   --f7-card-footer-padding-vertical: 4px;
  59.   --f7-card-footer-padding-horizontal: 16px;
  60.   --f7-card-footer-min-height: 48px;
  61.   --f7-card-expandable-margin-horizontal: 12px;
  62.   --f7-card-expandable-margin-vertical: 24px;
  63.   --f7-card-expandable-box-shadow: var(--f7-elevation-10);
  64.   --f7-card-expandable-border-radius: 8px;
  65.   --f7-card-expandable-tablet-border-radius: 4px;
  66.   --f7-card-expandable-header-font-size: 24px;
  67.   --f7-card-expandable-header-font-weight: 500;
  68. }
  69. .aurora {
  70.   --f7-card-margin-horizontal: 10px;
  71.   --f7-card-margin-vertical: 10px;
  72.   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  73.   --f7-card-content-padding-horizontal: 15px;
  74.   --f7-card-content-padding-vertical: 15px;
  75.   --f7-card-header-font-size: 14px;
  76.   --f7-card-header-font-weight: bold;
  77.   --f7-card-header-padding-vertical: 10px;
  78.   --f7-card-header-padding-horizontal: 15px;
  79.   --f7-card-header-min-height: 38px;
  80.   --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
  81.   --f7-card-footer-padding-vertical: 10px;
  82.   --f7-card-footer-padding-horizontal: 15px;
  83.   --f7-card-footer-min-height: 38px;
  84.   --f7-card-expandable-margin-horizontal: 10px;
  85.   --f7-card-expandable-margin-vertical: 20px;
  86.   --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  87.   --f7-card-expandable-border-radius: 15px;
  88.   --f7-card-expandable-tablet-border-radius: 5px;
  89.   --f7-card-expandable-header-font-size: 27px;
  90.   --f7-card-expandable-header-font-weight: bold;
  91. }

Examples

Simple Cards

  1. <div class="card">
  2.   <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
  3. </div>
  5. <div class="card">
  6.   <div class="card-header">Card header</div>
  7.   <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
  8.   <div class="card-footer">Card Footer</div>
  9. </div>
  11. <div class="card">
  12.   <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
  13. </div>

Outline Cards

  1. <div class="card card-outline">
  2.   <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
  3. </div>
  5. <div class="card card-outline">
  6.   <div class="card-header">Card header</div>
  7.   <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
  8.   <div class="card-footer">Card Footer</div>
  9. </div>
  11. <div class="card card-outline">
  12.   <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
  13. </div>

Styled Cards

  1. .demo-card-header-pic .card-header {
  2.   height: 40vw;
  3.   background-size: cover;
  4.   background-position: center;
  5.   color: #fff;
  6. }
  7. .demo-card-header-pic .card-content-padding .date{
  8.   color: #8e8e93;
  9. }

Facebook Cards

  1. .demo-facebook-card .card-header {
  2.   display: block;
  3.   padding: 10px;
  4. }
  5. .demo-facebook-card .demo-facebook-avatar {
  6.   float: left;
  7. }
  8. .demo-facebook-card .demo-facebook-name {
  9.   margin-left: 44px;
  10.   font-size: 14px;
  11.   font-weight: 500;
  12. }
  13. .demo-facebook-card .demo-facebook-date {
  14.   margin-left: 44px;
  15.   font-size: 13px;
  16.   color: #8e8e93;
  17. }
  18. .demo-facebook-card .card-footer {
  19.   background: #fafafa;
  20. }
  21. .demo-facebook-card .card-footer a {
  22.   color: #81848b;
  23.   font-weight: 500;
  24. }
  25. .demo-facebook-card .card-content img {
  26.   display: block;
  27. }
  28. .demo-facebook-card .card-content-padding {
  29. }
  31.   color: #8e8e93;
  32. }
  1. <div class="card demo-facebook-card">
  2.   <div class="card-header">
  3.     <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
  4.     <div class="demo-facebook-name">John Doe</div>
  5.     <div class="demo-facebook-date">Monday at 3:47 PM</div>
  6.   </div>
  7.   <div class="card-content"> <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/></div>
  8.   <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
  9. </div>
  11. <div class="card demo-facebook-card">
  12.   <div class="card-header">
  13.     <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
  14.     <div class="demo-facebook-name">John Doe</div>
  15.     <div class="demo-facebook-date">Monday at 2:15 PM</div>
  16.   </div>
  17.   <div class="card-content card-content-padding">
  18.     <p>What a nice photo i took yesterday!</p><img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
  19.     <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
  20.   </div>
  21.   <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
  22. </div>

Cards With List View

  1. <div class="card">
  2.   <div class="card-content">
  3.     <div class="list links-list">
  4.       <ul>
  5.         <li><a href="#">Link 1</a></li>
  6.         <li><a href="#">Link 2</a></li>
  7.         <li><a href="#">Link 3</a></li>
  8.         <li><a href="#">Link 4</a></li>
  9.         <li><a href="#">Link 5</a></li>
  10.       </ul>
  11.     </div>
  12.   </div>
  13. </div>
  15. <div class="card">
  16.   <div class="card-header">New Releases:</div>
  17.   <div class="card-content">
  18.     <div class="list media-list">
  19.       <ul>
  20.         <li class="item-content">
  21.           <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/></div>
  22.           <div class="item-inner">
  23.             <div class="item-title-row">
  24.               <div class="item-title">Yellow Submarine</div>
  25.             </div>
  26.             <div class="item-subtitle">Beatles</div>
  27.           </div>
  28.         </li>
  29.         <li class="item-content">
  30.           <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/></div>
  31.           <div class="item-inner">
  32.             <div class="item-title-row">
  33.               <div class="item-title">Don't Stop Me Now</div>
  34.             </div>
  35.             <div class="item-subtitle">Queen</div>
  36.           </div>
  37.         </li>
  38.         <li class="item-content">
  39.           <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44"/></div>
  40.           <div class="item-inner">
  41.             <div class="item-title-row">
  42.               <div class="item-title">Billie Jean</div>
  43.             </div>
  44.             <div class="item-subtitle">Michael Jackson</div>
  45.           </div>
  46.         </li>
  47.       </ul>
  48.     </div>
  49.   </div>
  50.   <div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
  51. </div>

Expandable Cards

  1. <div class="card card-expandable">
  2.   <div class="card-content">
  3.     <div class="bg-color-red" style="height: 300px">
  4.       <div class="card-header text-color-white display-block">
  5.         Framework7
  6.         <br>
  7.         <small style="opacity: 0.7">Build Mobile Apps</small>
  8.       </div>
  9.       <a href="#" class="link card-close card-opened-fade-in color-white" style="position: absolute; right: 15px; top: 15px">
  10.         <i class="icon f7-icons">close_round_fill</i>
  11.       </a>
  12.     </div>
  13.     <div class="card-content-padding">
  14.       <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.</p>
  15.       ...
  16.     </div>
  17.   </div>
  18. </div>
  19. <div class="card card-expandable">
  20.   <div class="card-content">
  21.     <div class="bg-color-yellow" style="height: 300px">
  22.       <div class="card-header text-color-black display-block">
  23.         Framework7
  24.         <br>
  25.         <small style="opacity: 0.7">Build Mobile Apps</small>
  26.       </div>
  27.       <a href="#" class="link card-close card-opened-fade-in color-black" style="position: absolute; right: 15px; top: 15px">
  28.         <i class="icon f7-icons">close_round_fill</i>
  29.       </a>
  30.     </div>
  31.     <div class="card-content-padding">
  32.       <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to.</p>
  33.       ...
  34.     </div>