Card Vue Component

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

Usage examples

Minimal layout

<f7-card title="Card Title" content="Card Content" footer="Card Footer"></f7-card>

Renders to:

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-content">
    <div class="card-content-inner">Card Content</div>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

Minimal layout without Inner

<f7-card title="Card Title" content="Card Content" footer="Card Footer" :inner="false"></f7-card>

Renders to:

<div class="card">
  <div class="card-header">Card Title</div>
  <div class="card-content">Card Content</div>
  <div class="card-footer">Card Footer</div>
</div>

Custom Layout

<f7-card>
  <f7-card-header>Card header content</f7-card-header>
  <f7-card-content>Card content</f7-card-content>
  <f7-card-footer>Card footer content</f7-card-footer>
</f7-card>

Renders to:

<div class="card">
  <div class="card-header">Card header content</div>
  <div class="card-content">
    <div class="card-content-inner">
      Card content
    </div>
  </div>
  <div class="card-footer">Card footer content</div>
</div>

Properties

Prop	Type	Default	Description
<f7-card> properties
title	string		Card header content
content	string		Card content
footer	string		Card footer content
inner	boolean	true	Enables additiona inner wrapping element
<f7-card-content> properties
inner	boolean	true	Enables additional inner wrapping element