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

Examples

1. <BlockTitle>Simple Cards</BlockTitle>
2. <Card
3. 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."
4. ></Card>
5. <Card
6. title="Card header"
7. content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
8. footer="Card footer"
9. ></Card>
10. <Card
11. 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. "
12. ></Card>

14. <BlockTitle>Outline Cards</BlockTitle>
15. <Card
16. outline
17. 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."
18. ></Card>
19. <Card
20. outline
21. title="Card header"
22. content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
23. footer="Card footer"
24. ></Card>
25. <Card
26. outline
27. 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. "
28. ></Card>

30. <BlockTitle>Styled Cards</BlockTitle>
31. <Card className="demo-card-header-pic">
32. <CardHeader
33. className="no-border"
34. valign="bottom"
35. style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/nature/3/)' }}
36. >Journey To Mountains</CardHeader>
37. <CardContent>
38. <p className="date">Posted on January 21, 2015</p>
39. <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
40. </CardContent>
41. <CardFooter>
42. <Link>Like</Link>
43. <Link>Read more</Link>
44. </CardFooter>
45. </Card>
46. <Card className="demo-card-header-pic">
47. <CardHeader
48. className="no-border"
49. valign="bottom"
50. style={{ backgroundImage: 'url(http://lorempixel.com/1000/600/people/6/)' }}
51. >Journey To Mountains</CardHeader>
52. <CardContent>
53. <p className="date">Posted on January 21, 2015</p>
54. <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
55. </CardContent>
56. <CardFooter>
57. <Link>Like</Link>
58. <Link>Read more</Link>
59. </CardFooter>
60. </Card>

62. <BlockTitle>Facebook Cards</BlockTitle>
63. <Card className="demo-facebook-card">
64. <CardHeader className="no-border">
65. <div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
66. <div className="demo-facebook-name">John Doe</div>
67. <div className="demo-facebook-date">Monday at 3:47 PM</div>
68. </CardHeader>
69. <CardContent padding={false}>
70. <img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
71. </CardContent>
72. <CardFooter className="no-border">
73. <Link>Like</Link>
74. <Link>Comment</Link>
75. <Link>Share</Link>
76. </CardFooter>
77. </Card>
78. <Card className="demo-facebook-card">
79. <CardHeader className="no-border">
80. <div className="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
81. <div className="demo-facebook-name">John Doe</div>
82. <div className="demo-facebook-date">Monday at 2:15 PM</div>
83. </CardHeader>
84. <CardContent>
85. <p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
86. <p className="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
87. </CardContent>
88. <CardFooter className="no-border">
89. <Link>Like</Link>
90. <Link>Comment</Link>
91. <Link>Share</Link>
92. </CardFooter>
93. </Card>

95. <BlockTitle>Cards With List View</BlockTitle>
96. <Card>
97. <CardContent padding={false}>
98. <List>
99. <ListItem link="#">Link 1</ListItem>
100. <ListItem link="#">Link 2</ListItem>
101. <ListItem link="#">Link 3</ListItem>
102. <ListItem link="#">Link 4</ListItem>
103. <ListItem link="#">Link 5</ListItem>
104. </List>
105. </CardContent>
106. </Card>
107. <Card title="New Reelases">
108. <CardContent padding={false}>
109. <List medial-list>
110. <ListItem
111. title="Yellow Submarine"
112. subtitle="Beatles"
113. >
114. <img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44"/>
115. </ListItem>
116. <ListItem
117. title="Don't Stop Me Now"
118. subtitle="Queen"
119. >
120. <img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44"/>
121. </ListItem>
122. <ListItem
123. title="Billie Jean"
124. subtitle="Michael Jackson"
125. >
126. <img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44"/>
127. </ListItem>
128. </List>
129. </CardContent>
130. <CardFooter>
131. <span>January 20, 2015</span>
132. <span>5 comments</span>
133. </CardFooter>
134. </Card>