-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Floating Action Button
- Form Data / Storage
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Custom Build
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.
Card Layout
Lets look at a basic card HTML layout
<div class="card">
<div class="card-header">Header</div>
<div class="card-content">
<!-- Card content -->
</div>
<div class="card-footer">Footer</div>
</div>
<div class="card">
<div class="card-header">Header</div>
<div class="card-content card-content-padding">
<!-- Card content -->
</div>
<div class="card-footer">Footer</div>
</div>
Where:
-
<div class="card">
- 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
-
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:
<div class="card-header align-items-flex-start"> - align header items by header top line
<div class="card-footer align-items-flex-end"> - align footer items by footer bottom line
Examples
Simple Cards
<div class="card">
<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>
</div>
<div class="card">
<div class="card-header">Card header</div>
<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>
<div class="card-footer">Card Footer</div>
</div>
<div class="card">
<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>
</div>
Styled Cards
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
color: #fff;
}
.demo-card-header-pic .card-content-padding .date{
color: #8e8e93;
}
<div class="card demo-card-header-pic">
<div style="background-image:url(http://lorempixel.com/1000/600/nature/3/)" class="card-header align-items-flex-end">Journey To Mountains</div>
<div class="card-content card-content-padding">
<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>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://lorempixel.com/1000/600/people/6/)" class="card-header align-items-flex-end">Lorem Ipsum</div>
<div class="card-content card-content-padding">
<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>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>
Facebook Cards
.demo-facebook-card .card-header {
display: block;
padding: 10px;
}
.demo-facebook-card .demo-facebook-avatar {
float: left;
}
.demo-facebook-card .demo-facebook-name {
margin-left: 44px;
font-size: 14px;
font-weight: 500;
}
.demo-facebook-card .demo-facebook-date {
margin-left: 44px;
font-size: 13px;
color: #8e8e93;
}
.demo-facebook-card .card-footer {
background: #fafafa;
}
.demo-facebook-card .card-footer a {
color: #81848b;
font-weight: 500;
}
.demo-facebook-card .card-content img {
display: block;
}
.demo-facebook-card .card-content-padding {
padding: 15px 10px;
}
.demo-facebook-card .card-content-padding .likes {
color: #8e8e93;
}
<div class="card demo-facebook-card">
<div class="card-header">
<div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
<div class="demo-facebook-name">John Doe</div>
<div class="demo-facebook-date">Monday at 3:47 PM</div>
</div>
<div class="card-content"> <img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/></div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
</div>
<div class="card demo-facebook-card">
<div class="card-header">
<div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
<div class="demo-facebook-name">John Doe</div>
<div class="demo-facebook-date">Monday at 2:15 PM</div>
</div>
<div class="card-content card-content-padding">
<p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
<p class="likes">Likes: 112 Comments: 43</p>
</div>
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
</div>
Cards With List View
<div class="card">
<div class="card-content">
<div class="list links-list">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">New Releases:</div>
<div class="card-content">
<div class="list media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/4" width="44"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Yellow Submarine</div>
</div>
<div class="item-subtitle">Beatles</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/5" width="44"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Don't Stop Me Now</div>
</div>
<div class="item-subtitle">Queen</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/6" width="44"/></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Billie Jean</div>
</div>
<div class="item-subtitle">Michael Jackson</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
</div>