-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Card React 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 React component represents Cards component.
Card Components
There are following components included:
Card
/F7Card
CardHeader
/F7CardHeader
CardContent
/F7CardContent
CardFooter
/F7CardFooter
Card Properties
Prop | Type | Default | Description |
---|---|---|---|
<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 |
<CardContent> properties | |||
padding | boolean | true | Adds additional inner padding |
Examples
<BlockTitle>Simple Cards</BlockTitle>
<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."
></Card>
<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"
></Card>
<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. "
></Card>
<BlockTitle>Outline Cards</BlockTitle>
<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."
></Card>
<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"
></Card>
<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. "
></Card>
<BlockTitle>Styled Cards</BlockTitle>
<Card className="demo-card-header-pic">
<CardHeader
className="no-border"
valign="bottom"
style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/nature/3/)' }}
>Journey To Mountains</CardHeader>
<CardContent>
<p className="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>
</CardContent>
<CardFooter>
<Link>Like</Link>
<Link>Read more</Link>
</CardFooter>
</Card>
<Card className="demo-card-header-pic">
<CardHeader
className="no-border"
valign="bottom"
style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/people/6/)' }}
>Journey To Mountains</CardHeader>
<CardContent>
<p className="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>
</CardContent>
<CardFooter>
<Link>Like</Link>
<Link>Read more</Link>
</CardFooter>
</Card>
<BlockTitle>Facebook Cards</BlockTitle>
<Card className="demo-facebook-card">
<CardHeader className="no-border">
<div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
<div className="demo-facebook-name">John Doe</div>
<div className="demo-facebook-date">Monday at 3:47 PM</div>
</CardHeader>
<CardContent padding={false}>
<img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
</CardContent>
<CardFooter className="no-border">
<Link>Like</Link>
<Link>Comment</Link>
<Link>Share</Link>
</CardFooter>
</Card>
<Card className="demo-facebook-card">
<CardHeader className="no-border">
<div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
<div className="demo-facebook-name">John Doe</div>
<div className="demo-facebook-date">Monday at 2:15 PM</div>
</CardHeader>
<CardContent>
<p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
<p className="likes">Likes: 112 Comments: 43</p>
</CardContent>
<CardFooter className="no-border">
<Link>Like</Link>
<Link>Comment</Link>
<Link>Share</Link>
</CardFooter>
</Card>
<BlockTitle>Cards With List View</BlockTitle>
<Card>
<CardContent padding={false}>
<List>
<ListItem link="#">Link 1</ListItem>
<ListItem link="#">Link 2</ListItem>
<ListItem link="#">Link 3</ListItem>
<ListItem link="#">Link 4</ListItem>
<ListItem link="#">Link 5</ListItem>
</List>
</CardContent>
</Card>
<Card title="New Reelases">
<CardContent padding={false}>
<List medial-list>
<ListItem
title="Yellow Submarine"
subtitle="Beatles"
>
<img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44"/>
</ListItem>
<ListItem
title="Don't Stop Me Now"
subtitle="Queen"
>
<img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44"/>
</ListItem>
<ListItem
title="Billie Jean"
subtitle="Michael Jackson"
>
<img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44"/>
</ListItem>
</List>
</CardContent>
<CardFooter>
<span>January 20, 2015</span>
<span>5 comments</span>
</CardFooter>
</Card>