Skip to content

Instantly share code, notes, and snippets.

@djirdehh
Created March 3, 2023 02:10
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save djirdehh/d93d5a701d1392cb373556a8435985fb to your computer and use it in GitHub Desktop.
Index file of code samples used in the following article: An Introduction to the KendoReact Card Component
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