font sizes

Author: StackOverflowIsBetterThanAnyAI

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
         <div
             data-slot="card"
             className={cn(
-                'bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm',
+                'bg-card text-card-foreground text-pretty flex flex-col gap-6 rounded-xl py-6 shadow-sm',
                 className
             )}
             {...props}
@@ -32,7 +32,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot="card-title"
-            className={cn('leading-none font-semibold', className)}
+            className={cn(
+                'leading-none text-base sm:text-lg lg:text-xl font-semibold',
+                className
+            )}
             {...props}
         />
     )
@@ -42,7 +45,10 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot="card-description"
-            className={cn('text-muted-foreground text-sm', className)}
+            className={cn(
+                'text-muted-foreground text-xs sm:text-sm',
+                className
+            )}
             {...props}
         />
     )
@@ -52,7 +58,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot="card-content"
-            className={cn('px-6', className)}
+            className={cn('px-6 text-sm sm:text-base lg:text-lg', className)}
             {...props}
         />
     )
@@ -62,10 +68,13 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     return (
         <div
             data-slot="card-footer"
-            className={cn('flex items-center px-6', className)}
+            className={cn(
+                'flex items-center mt-auto px-6 text-xs sm:text-sm',
+                className
+            )}
             {...props}
         />
     )
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }