Created
March 3, 2023 02:10
Star
You must be signed in to star a gist
Index file of code samples used in the following article: An Introduction to the KendoReact Card Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import ReactDOM from "react-dom/client"; | |
import { Skeleton } from "@progress/kendo-react-indicators"; | |
import { | |
Avatar, | |
Card, | |
CardTitle, | |
CardSubtitle, | |
CardHeader, | |
CardImage, | |
CardFooter, | |
} from "@progress/kendo-react-layout"; | |
import "./index.scss"; | |
// Default card component | |
const AppDefaultCard = () => { | |
return ( | |
<div> | |
<Card | |
style={{ | |
minWidth: 350, | |
width: 350, | |
height: "auto", | |
}} | |
> | |
<CardHeader className="k-hbox"> | |
<Avatar type={"image"} shape={"circle"}> | |
<img | |
alt="User Avatar" | |
src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/author-images/hassan_djirdeh_profile_photo.png?sfvrsn=3f0d3926_3" | |
/> | |
</Avatar> | |
<div> | |
<CardTitle>Hassan Djirdeh</CardTitle> | |
<CardSubtitle | |
style={{ | |
marginTop: 0, | |
}} | |
> | |
2 hours ago | |
</CardSubtitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
<CardFooter>Check out this view of downtown TO!</CardFooter> | |
</Card> | |
</div> | |
); | |
}; | |
// Card arranged in horizontal orientation | |
const AppHorizontalCard = () => { | |
return ( | |
<div> | |
<Card orientation="horizontal"> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
<div className="k-hbox"> | |
<CardHeader> | |
<CardTitle>Hassan Djirdeh</CardTitle> | |
<CardSubtitle | |
style={{ | |
marginTop: 0, | |
}} | |
> | |
2 hours ago | |
</CardSubtitle> | |
<CardBody | |
style={{ | |
paddingLeft: 0, | |
}} | |
> | |
Check out this view of downtown TO at dusk! Its the right place to | |
be in a beautiful summer evening like this! | |
</CardBody> | |
</CardHeader> | |
<CardFooter> | |
<button>Like</button> | |
</CardFooter> | |
</div> | |
</Card> | |
</div> | |
); | |
}; | |
// Multiple card types arranged in a list | |
const AppTypes = () => { | |
return ( | |
<div | |
style={{ | |
display: "flex", | |
justifyContent: "space-evenly", | |
}} | |
> | |
<div className="k-card-group"> | |
{/* Default */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Default</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
{/* Primary */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
type="primary" | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Primary</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
{/* Info */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
type="info" | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Info</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
{/* Success */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
type="success" | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Success</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
{/* Warning */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
type="warning" | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Warning</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
{/* Error */} | |
<Card | |
style={{ | |
width: 200, | |
}} | |
type="error" | |
> | |
<CardHeader className="k-hbox"> | |
<div> | |
<CardTitle>Card Type: Error</CardTitle> | |
</div> | |
</CardHeader> | |
<CardImage src="https://images.unsplash.com/photo-1486325212027-8081e485255e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" /> | |
</Card> | |
</div> | |
</div> | |
); | |
}; | |
// Card with card actions | |
const App = () => { | |
return ( | |
<div> | |
<Card | |
style={{ | |
minWidth: 350, | |
width: 350, | |
height: "auto", | |
}} | |
> | |
<CardBody> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | |
eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
</CardBody> | |
<CardActions layout="center"> | |
<button>Action 1</button> | |
<button>Action 2</button> | |
</CardActions> | |
</Card> | |
</div> | |
); | |
}; | |
const root = ReactDOM.createRoot(document.getElementById("root")); | |
root.render( | |
<React.StrictMode> | |
<App /> | |
</React.StrictMode> | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment