Card React Component

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
noShadow	boolean	false	Disables card shadow
noBorder	boolean	false	Disables card border (for outline cards)
expandable	boolean	false	Enables expandable card
expandableAnimateWidth	boolean	false	Enables card content width also animatable and responsive, but can affect performance
expandableOpened	boolean	false	Boolean property indicating whether the expandable card opened or not
animate	boolean	true	Specifies to open expandable card with animation or not
hideNavbarOnOpen	boolean		Will hide Navbar on expandable card open. By default inherits same app card parameter.
hideToolbarOnOpen	boolean		Will hide Toolbar on expandable card open. By default inherits same app card parameter.
swipeToClose	boolean		Allows to close expandable card with swipe. By default inherits same app card parameter.
backdrop	boolean		Enables expandable card backdrop layer. By default inherits same app card parameter.
backdropEl	string		Allows to specify custom expandable card backdrop element. This should be a CSS selector of backdrop element, e.g. `.card-backdrop.custom-backdrop`
closeByBackdropClick	boolean		When enabled, expandable card will be closed on its backdrop click. By default inherits same app card parameter.
<f7-card-content> properties
padding	boolean	true	Adds additional inner padding
<CardContent> properties
padding	boolean	true	Adds additional inner padding

Card Events

Event	Description
<Card> events
---	---
cardBeforeOpen	Event will be triggered right before expandable card starts its opening animation. `event.detail.prevent` contains function that will prevent card from opening when called
cardOpen	Event will be triggered when expandable card starts its opening animation
cardOpened	Event will be triggered after expandable card completes its opening animation
cardClose	Event will be triggered when expandable card starts its closing animation
cardClosed	Event will be triggered after expandable card completes its closing animation

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(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)' }}
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(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)' }}
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="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" 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="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" 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="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" 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="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" 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 Releases:">
108. <CardContent padding={false}>
109. <List medial-list>
110. <ListItem
111. title="Yellow Submarine"
112. subtitle="Beatles"
113. >
114. <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/>
115. </ListItem>
116. <ListItem
117. title="Don't Stop Me Now"
118. subtitle="Queen"
119. >
120. <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/>
121. </ListItem>
122. <ListItem
123. title="Billie Jean"
124. subtitle="Michael Jackson"
125. >
126. <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" 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>

136. <BlockTitle>Expandable Cards</BlockTitle>
137. <Card expandable>
138. <CardContent padding={false}>
139. <div className="bg-color-red" style={{height: '300px'}}>
140. <CardHeader textColor="white" className="display-block">
141. Framework7
142. <br />
143. <small style={{opacity: 0.7}}>Build Mobile Apps</small>
144. </CardHeader>
145. <Link cardClose color="white" className="card-opened-fade-in" style={{position: 'absolute', right: '15px', top: '15px'}} iconF7="multiply_circle_fill" />
146. </div>
147. <div className="card-content-padding">
148. <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
149. </div>
150. </CardContent>
151. </Card>

153. <Card expandable>
154. <CardContent padding={false}>
155. <div className="bg-color-yellow" style={{height: '300px'}}>
156. <CardHeader textColor="black" className="display-block">
157. Framework7
158. <br/>
159. <small style={{opacity: 0.7}}>Build Mobile Apps</small>
160. </CardHeader>
161. <Link cardClose color="black" className="card-opened-fade-in" style={{position: 'absolute', right: '15px', top: '15px'}} iconF7="multiply_circle_fill" />
162. </div>
163. <div className="card-content-padding">
164. <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
165. </div>
166. </CardContent>
167. </Card>

← Button

Checkbox →