add wrapper

WordPress · Aug 23, 2022 · 033f21e · 033f21e
1 parent fe95fd2
commit 033f21e
Showing 1 changed file with 27 additions and 25 deletions.
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
@@ -42,31 +42,33 @@ export default meta;
 
 const Template: ComponentStory< typeof Card > = ( args ) => {
 	return (
-		<Card { ...args }>
-			<CardHeader>
-				<Heading>CardHeader</Heading>
-			</CardHeader>
-			<CardBody>
-				<Text>CardBody</Text>
-			</CardBody>
-			<CardBody>
-				<Text>CardBody (before CardDivider)</Text>
-			</CardBody>
-			<CardDivider />
-			<CardBody>
-				<Text>CardBody (after CardDivider)</Text>
-			</CardBody>
-			<CardMedia>
-				<img
-					alt="Card Media"
-					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-				/>
-			</CardMedia>
-			<CardFooter>
-				<Text>CardFooter</Text>
-				<Button variant="secondary">Action Button</Button>
-			</CardFooter>
-		</Card>
+		<div style={ { maxWidth: '280px' } }>
+			<Card { ...args }>
+				<CardHeader>
+					<Heading>CardHeader</Heading>
+				</CardHeader>
+				<CardBody>
+					<Text>CardBody</Text>
+				</CardBody>
+				<CardBody>
+					<Text>CardBody (before CardDivider)</Text>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
+					<Text>CardBody (after CardDivider)</Text>
+				</CardBody>
+				<CardMedia>
+					<img
+						alt="Card Media"
+						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+					/>
+				</CardMedia>
+				<CardFooter>
+					<Text>CardFooter</Text>
+					<Button variant="secondary">Action Button</Button>
+				</CardFooter>
+			</Card>
+		</div>
 	);
 };