CardContainer for grouped content and actions.

import Card, { CardTitle, CardContent } from '@/components/Card';
export function Example() {  return (    <Card>      <CardTitle>Lorem Ipsum</CardTitle>      <CardContent>        Lorem ipsum dolor sit amet, consectetur adipiscing elit.        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.      </CardContent>    </Card>  );}

import Card, {  CardHeader, CardTitle, CardDescription,   CardContent, CardFooter } from '@/components/Card';import Button from '@/components/Button';import { Star } from 'lucide-react';
export function Example() {  return (    <Card>      <CardHeader>        <Star size={48} style={{           margin: 'var(--spacing-l) auto',           display: 'block',           color: 'var(--color-amber-400)'         }} />      </CardHeader>      <CardTitle>Lorem Premium</CardTitle>      <CardDescription>        Premium lorem ipsum generator with advanced features.      </CardDescription>      <CardContent>        Access to unlimited lorem ipsum text, custom formatting options,        and priority support for all your content needs.      </CardContent>      <CardFooter>        <Button>Get Premium</Button>        <Button $type="ghost">Learn More</Button>      </CardFooter>    </Card>  );}

import Card, { CardTitle, CardContent } from '@/components/Card';import Text from '@/components/Text';import { User, Heart, Star } from 'lucide-react';
export function Example() {  return (    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 'var(--spacing-l)' }}>      <Card $size="s">        <CardTitle>Lorem</CardTitle>        <CardContent>          <User size={24} style={{ color: 'var(--color-blue-400)' }} />          <Text $fontSize="s" $color="muted">42 users</Text>        </CardContent>      </Card>      <Card $size="s">        <CardTitle>Ipsum</CardTitle>        <CardContent>          <Heart size={24} style={{ color: 'var(--color-red-400)' }} />          <Text $fontSize="s" $color="muted">128 likes</Text>        </CardContent>      </Card>      <Card $size="s">        <CardTitle>Dolor</CardTitle>        <CardContent>          <Star size={24} style={{ color: 'var(--color-amber-400)' }} />          <Text $fontSize="s" $color="muted">4.8 rating</Text>        </CardContent>      </Card>    </div>  );}

import Card, { CardContent } from '@/components/Card';import Text from '@/components/Text';
export function Example() {  return (    <Text>      Lorem ipsum dolor sit amet{' '}      <Card $inline $size="s">        <CardContent>inline card</CardContent>      </Card>      {' '}consectetur adipiscing elit. Sed do eiusmod{' '}      <Card $inline $size="s">        <CardContent>another inline</CardContent>      </Card>      {' '}tempor incididunt ut labore.    </Text>  );}