-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
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.
Usage examples
Minimal layout
<Card title="Card Title" content="Card Content" footer="Card Footer"></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
<Card title="Card Title" content="Card Content" footer="Card Footer" inner={false}></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
<Card>
<CardHeader>Card header content</CardHeader>
<CardContent>Card content</CardContent>
<CardFooter>Card footer content</CardFooter>
</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 |
---|---|---|---|
<Card> properties | |||
title | string | Card header content | |
content | string | Card content | |
footer | string | Card footer content | |
inner | boolean | true | Enables additiona inner wrapping element |
<CardContent> properties | |||
inner | boolean | true | Enables additional inner wrapping element |