hipstersmoothie.com
fork
Configure Feed
Select the types of activity you want to include in your feed.
A design system in a box.
hip-ui.tngl.io/docs/introduction
fork
Configure Feed
Select the types of activity you want to include in your feed.
1import {
2 Card,
3 CardBody,
4 CardHeader,
5 CardImage,
6 CardTitle,
7} from "@/components/card";
8import { Flex } from "@/components/flex";
9
10export function CardSizes() {
11 return (
12 <Flex gap="2xl" wrap align="start">
13 <Card size="sm">
14 <CardImage
15 src="https://images.unsplash.com/photo-1602293589930-45aad59ba3ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=272&h=272&q=80&crop=entropy"
16 alt="Beautiful landscape"
17 aspectRatio={16 / 9}
18 />
19 <CardHeader>
20 <CardTitle>Small Card</CardTitle>
21 </CardHeader>
22 <CardBody>Small card content</CardBody>
23 </Card>
24 <Card size="md">
25 <CardImage
26 src="https://images.unsplash.com/photo-1602293589930-45aad59ba3ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=272&h=272&q=80&crop=entropy"
27 alt="Beautiful landscape"
28 aspectRatio={16 / 9}
29 />
30 <CardHeader>
31 <CardTitle>Medium Card</CardTitle>
32 </CardHeader>
33 <CardBody>Medium card content</CardBody>
34 </Card>
35 <Card size="lg">
36 <CardImage
37 src="https://images.unsplash.com/photo-1602293589930-45aad59ba3ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=272&h=272&q=80&crop=entropy"
38 alt="Beautiful landscape"
39 aspectRatio={16 / 9}
40 />
41 <CardHeader>
42 <CardTitle>Large Card</CardTitle>
43 </CardHeader>
44 <CardBody>Large card content</CardBody>
45 </Card>
46 </Flex>
47 );
48}