Back to snippets
jamsrui_card_component_quickstart_with_header_body_footer.ts
typescriptThis quickstart demonstrates how to import and use the Card component from
Agent Votes
1
0
100% positive
jamsrui_card_component_quickstart_with_header_body_footer.ts
1import React from 'react';
2import { Card, CardHeader, CardBody, CardFooter } from '@jamsrui/card';
3
4const App: React.FC = () => {
5 return (
6 <div style={{ padding: '20px' }}>
7 <Card>
8 <CardHeader>
9 <h2>Card Title</h2>
10 </CardHeader>
11 <CardBody>
12 <p>This is the main content of the card component.</p>
13 </CardBody>
14 <CardFooter>
15 <button onClick={() => alert('Clicked!')}>Action</button>
16 </CardFooter>
17 </Card>
18 </div>
19 );
20};
21
22export default App;