Cards are commonly used to display a collection of related information in a compact, visual format, making it easier for users to browse and interact with data.
import React from "react";
import { Card, Flex, theme, Typography } from "antd";
const { useToken } = theme;
const { Text, Link } = Typography;
export default function App() {
const { token } = useToken();
const styles = {
card: {
width: "300px",
},
paragraph: {
color: token.colorTextSecondary,
},
};
return (
<Flex justify="center">
<Card style={styles.card}>
<Flex vertical gap="middle">
<img
alt="Card image"
src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=3164&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<Flex vertical gap={token.marginXXS}>
<Text strong>Card title</Text>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
hendrerit ex vitae sodales.
</Text>
</Flex>
</Flex>
</Card>
</Flex>
);
}
import React from "react";
import { Card, Flex, Switch, theme, Typography } from "antd";
import {
InstagramFilled,
EditOutlined,
DeleteOutlined,
} from "@ant-design/icons";
const { useToken } = theme;
const { Text, Link } = Typography;
export default function App() {
const { token } = useToken();
const styles = {
card: {
width: "400px",
},
paragraph: {
color: token.colorTextSecondary,
},
icon: {
color: token.colorIcon,
fontSize: token.sizeXL,
},
};
return (
<Flex justify="center">
<Card
style={styles.card}
actions={[
<EditOutlined key="edit" />,
<DeleteOutlined key="delete" />,
]}
>
<Flex vertical gap="large">
<Flex justify="space-between">
<InstagramFilled style={styles.icon} />
<Switch />
</Flex>
<Flex vertical gap={token.marginXXS}>
<Text strong>Instagram</Text>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum
hendrerit ex vitae sodales.
</Text>
</Flex>
</Flex>
</Card>
</Flex>
);
}
import React from "react";
import { Button, Card, Flex, Grid, theme, Typography } from "antd";
import { FacebookFilled, MediumCircleFilled, TwitterCircleFilled } from '@ant-design/icons';
const { useToken } = theme;
const { Text, Link } = Typography;
const { useBreakpoint } = Grid;
export default function App() {
const { token } = useToken();
const screens = useBreakpoint();
const styles = {
card: {
width: "560px",
},
paragraph: {
color: token.colorTextSecondary,
},
icon: {
fontSize: "1.25rem",
color: token.colorIcon,
},
image: {
width: "160px",
objectFit: "cover"
}
};
return (
<Flex justify="center">
<Card style={styles.card}>
<Flex gap="large">
<img
alt="Card image"
src="https://images.unsplash.com/photo-1580894895938-bd31a62ed8ba?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
style={styles.image}
/>
<Flex vertical justify="space-between" gap="large">
<Flex vertical gap="small">
<Flex vertical>
<Text strong>Alicia Adams</Text>
<Text style={styles.paragraph}>Front-end developer</Text>
</Flex>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum hendrerit ex vitae sodales. Donec id leo ipsum scelerisque pharetra turpis.
</Text>
</Flex>
<Flex gap="middle">
<a href="https://antblocksui.com/" target="_blank"><FacebookFilled style={styles.icon}/></a>
<a href="https://antblocksui.com/" target="_blank"><TwitterCircleFilled style={styles.icon}/></a>
<a href="https://antblocksui.com/" target="_blank"><MediumCircleFilled style={styles.icon}/></a>
</Flex>
</Flex>
</Flex>
</Card>
</Flex>
);
}
import React from "react";
import { Button, Card, Flex, theme, Typography } from "antd";
import { FacebookFilled, MediumCircleFilled, TwitterCircleFilled } from '@ant-design/icons';
const { useToken } = theme;
const { Text, Link } = Typography;
export default function App() {
const { token } = useToken();
const styles = {
card: {
width: "300px",
},
paragraph: {
color: token.colorTextSecondary,
},
icon: {
fontSize: "1.25rem",
color: token.colorIcon
}
};
return (
<Flex justify="center">
<Card style={styles.card}>
<Flex vertical gap="large">
<img
alt="Card image"
src="https://images.unsplash.com/photo-1580894895938-bd31a62ed8ba?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<Flex vertical gap="small">
<Flex vertical>
<Text strong>Alicia Adams</Text>
<Text style={styles.paragraph}>Front-end developer</Text>
</Flex>
<Text style={styles.paragraph}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales.
</Text>
</Flex>
<Flex gap="middle">
<a href="https://antblocksui.com/" target="_blank"><FacebookFilled style={styles.icon}/></a>
<a href="https://antblocksui.com/" target="_blank"><TwitterCircleFilled style={styles.icon}/></a>
<a href="https://antblocksui.com/" target="_blank"><MediumCircleFilled style={styles.icon}/></a>
</Flex>
</Flex>
</Card>
</Flex>
);
}
import React from "react";
import { Flex, theme, Typography } from "antd";
const { useToken } = theme;
const { Text, Link } = Typography;
export default function App() {
const { token } = useToken();
const styles = {
card: {
width: "280px",
},
paragraph: {
color: token.colorTextSecondary,
},
image: {
borderRadius: token.borderRadius
}
};
return (
<Flex justify="center">
<div style={styles.card}>
<Flex vertical gap="small">
<img
style={styles.image}
alt="Card image"
src="https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<Flex vertical gap={0}>
<Text strong>Peter Smith</Text>
<Text style={styles.paragraph}>CEO</Text>
</Flex>
</Flex>
</div>
</Flex>
);
}
