add: aspect ratio to card figure

.github/workflows/publish.yml

@@ -18,7 +18,10 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
       - run: npm --version
       - run: npm ci
       - run: npm run build --if-present
       - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.mdx

@@ -17,6 +17,10 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+### Fixed
+
+- Card image by adding aspect ratio
+
 ## [0.25.10] — [0.25.16]
 
 ### Fixed

lib/components/Card/CardFigure.tsx

@@ -8,7 +8,7 @@ export interface CardFigureProps {
 export const CardFigure = ({ children, isRound }: CardFigureProps) => {
   const roundedImage = isRound ? `cu-figure--round pt-8 pb-2 px-6` : ''
 
-  return <figure className={`relative mb-2 overflow-hidden rounded-t-lg ${roundedImage}`}>{children}</figure>
+  return <figure className={`cu-figure relative mb-2 overflow-hidden rounded-t-lg ${roundedImage}`}>{children}</figure>
 }
 
 CardFigure.displayName = 'Card.Figure'

lib/components/Card/styles.css

@@ -29,6 +29,10 @@
   @apply w-full;
 }
 
+.cu-card .cu-figure img {
+  @apply aspect-[3/2];
+}
+
 .cu-card .cu-figure--round img,
 .cu-card .cu-figure--round svg {
   @apply mx-auto h-32 w-32 rounded-full border-4 border-white object-cover shadow-md @sm:md:h-48 @sm:md:w-48;