Card Vue Component

Cards, along with List View, is a one more great way to contain and organize your information. Cards contains 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.

Card Vue component represents Cards component.

Card Components

There are following components included:

f7-card
f7-card-header
f7-card-content
f7-card-footer

Card Properties

Prop	Type	Default	Description
<f7-card> properties
title	string		Card header content
content	string		Card content
footer	string		Card footer content
padding	boolean	true	Adds additional inner padding on card content
outline	boolean	false	Makes card outline - with border
outlineIos	boolean	false	Makes card outline in iOS theme
outlineMd	boolean	false	Makes card outline in MD theme
raised	boolean	false	Makes card raised - with shadow
header-divider	boolean	false	Adds divider (border) for card header
footer-divider	boolean	false	Adds divider (border) for card footer
expandable	boolean	false	Enables expandable card
expandable-animate-width	boolean	false	Enables card content width also animatable and responsive, but can affect performance
expandable-opened	boolean	false	Boolean property indicating whether the expandable card opened or not
animate	boolean	true	Specifies to open expandable card with animation or not
hide-navbar-on-open	boolean		Will hide Navbar on expandable card open. By default inherits same app card parameter.
hide-toolbar-on-open	boolean		Will hide Toolbar on expandable card open. By default inherits same app card parameter.
swipe-to-close	boolean		Allows to close expandable card with swipe. By default inherits same app card parameter.
backdrop	boolean		Enables expandable card backdrop layer. By default inherits same app card parameter.
backdrop-el	string		Allows to specify custom expandable card backdrop element. This should be a CSS selector of backdrop element, e.g. `.card-backdrop.custom-backdrop`
close-by-backdrop-click	boolean		When enabled, expandable card will be closed on its backdrop click. By default inherits same app card parameter.
<f7-card-content> properties
padding	boolean	true	Adds additional inner padding

Card Events

Event	Description
<f7-card> events
card:beforeopen	Event will be triggered right before expandable card starts its opening animation. `event.detail.prevent` contains function that will prevent card from opening when called
card:open	Event will be triggered when expandable card starts its opening animation
card:opened	Event will be triggered after expandable card completes its opening animation
card:close	Event will be triggered when expandable card starts its closing animation
card:closed	Event will be triggered after expandable card completes its closing animation

Card Slots

<f7-card> component has the following slots:

default - element will be inserted as a child of card content element
content - same as default
header - element will be inserted as a child of card header element
footer - element will be inserted as a child of card footer element

<f7-card>
  <span slot="header">Header</span>
  <span slot="content">Content</span>
  <span slot="footer">Footer</span>
</f7-card>

Renders to

<div class="card">
  <div class="card-header">
    <span>Header</span>
  </div>
  <div class="card-content">
    <span>Content</span>
  </div>
  <div class="card-footer">
    <span>Footer</span>
  </div>
</div>

Card v-model

Expandable Card component supports v-model on expandable-opened prop:

<template>
  <f7-page>
    <f7-card expandable v-model:expandable-opened="isOpened">
      ...
    </f7-card>
    <p>Card is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

Examples

cards.vue

<template>
  <f7-page>
    <f7-navbar title="Cards"></f7-navbar>

    <f7-block>
      <p>
        Cards are a great way to contain and organize your information, especially when combined
        with List Views. Cards can contain unique related data, like for example photos, text or
        links about a particular subject. Cards are typically an entry point to more complex and
        detailed information.
      </p>
    </f7-block>
    <f7-block-title>Simple Cards</f7-block-title>
    <f7-card
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Outline Cards</f7-block-title>
    <f7-card
      outline
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      outline
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      outline
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Outline With Dividers</f7-block-title>
    <f7-card
      outline
      header-divider
      footer-divider
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>

    <f7-block-title>Raised Cards</f7-block-title>
    <f7-card
      raised
      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
    ></f7-card>
    <f7-card
      raised
      title="Card header"
      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
      footer="Card footer"
    ></f7-card>
    <f7-card
      raised
      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
    ></f7-card>

    <f7-block-title>Styled Cards</f7-block-title>
    <f7-card outline-md class="demo-card-header-pic">
      <f7-card-header
        valign="bottom"
        style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
        >Journey To Mountains</f7-card-header
      >
      <f7-card-content>
        <p class="date">Posted on January 21, 2015</p>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non
          felis. Phasellus quis nibh hendrerit...
        </p>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>Like</f7-link>
        <f7-link>Read more</f7-link>
      </f7-card-footer>
    </f7-card>
    <f7-card class="demo-card-header-pic">
      <f7-card-header
        valign="bottom"
        style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
        >Journey To Mountains</f7-card-header
      >
      <f7-card-content>
        <p class="date">Posted on January 21, 2015</p>
        <p>
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non
          felis. Phasellus quis nibh hendrerit...
        </p>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>Like</f7-link>
        <f7-link>Read more</f7-link>
      </f7-card-footer>
    </f7-card>

    <f7-block-title>Cards With List View</f7-block-title>
    <f7-card>
      <f7-card-content :padding="false">
        <f7-list>
          <f7-list-item link="#">Link 1</f7-list-item>
          <f7-list-item link="#">Link 2</f7-list-item>
          <f7-list-item link="#">Link 3</f7-list-item>
          <f7-list-item link="#">Link 4</f7-list-item>
          <f7-list-item link="#">Link 5</f7-list-item>
        </f7-list>
      </f7-card-content>
    </f7-card>
    <f7-card title="New Releases:">
      <f7-card-content :padding="false">
        <f7-list medial-list>
          <f7-list-item title="Yellow Submarine" subtitle="Beatles">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
            </template>
          </f7-list-item>
          <f7-list-item title="Don't Stop Me Now" subtitle="Queen">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
            </template>
          </f7-list-item>
          <f7-list-item title="Billie Jean" subtitle="Michael Jackson">
            <template #media>
              <img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
            </template>
          </f7-list-item>
        </f7-list>
      </f7-card-content>
      <f7-card-footer>
        <span>January 20, 2015</span>
        <span>5 comments</span>
      </f7-card-footer>
    </f7-card>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Block,
  f7BlockTitle,
  f7Card,
  f7CardHeader,
  f7CardContent,
  f7CardFooter,
  f7List,
  f7ListItem,
  f7Link,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7BlockTitle,
    f7Card,
    f7CardHeader,
    f7CardContent,
    f7CardFooter,
    f7List,
    f7ListItem,
    f7Link,
  },
};
</script>

Improve this Doc

On this page

Card Components
Card Properties
Card Events
Card Slots
Card v-model
Examples