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.

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
<f7-card-content> properties
padding	boolean	true	Adds additional inner padding

Examples

Minimal layout with extra content padding

<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 card-content-padding">Card Content</div>
  <div class="card-footer">Card Footer</div>
</div>

Minimal layout without extra content padding

<f7-card title="Card Title" content="Card Content" footer="Card Footer" :padding="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>
    <p>Card content</p>
  </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">
    <p>Card content</p>
  </div>
  <div class="card-footer">Card footer content</div>
</div>