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