OXGN UI

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Subtitle>Card subtitle</Card.Subtitle>
    <p>Some quick example text...</p>
  </Card.Body>
</Card>
        

John Doe

Software Engineer

Full-stack developer with 5+ years of experience building modern web applications.

Message Follow

<Card>
  <Card.Header class="relative h-32 bg-gradient-to-br from-primary/20 to-primary/10">
    <!-- Header content -->
    <Avatar 
      src="profile.jpg"
      alt="John Doe"
      size="xl"
      borderStyle="thick"
      className="absolute -bottom-8 left-6"
    />
  </Card.Header>
  <Card.Body class="pt-12 px-6 pb-6">
    <Card.Title>John Doe</Card.Title>
    <Card.Subtitle>Software Engineer</Card.Subtitle>
    <p>Full-stack developer with 5+ years of experience...</p>
  </Card.Body>
  <Card.Footer>
    <div class="flex gap-2">
      <Button variant="outline">Message</Button>
      <Button variant="primary">Follow</Button>
    </div>
  </Card.Footer>
</Card>
        

<Card>
  <Card.Header class="h-48 bg-gradient-to-r from-primary/20 to-primary/10">
    <!-- Header content -->
  </Card.Header>
  <Card.Body>
    <Card.Title>Card with Header</Card.Title>
    <Card.Subtitle>This card has a header section</Card.Subtitle>
    <p>Perfect for images, graphics, or other header content.</p>
  </Card.Body>
</Card>
        

<Card>
  <Card.Body>
    <Card.Title>Card with Footer</Card.Title>
    <Card.Subtitle>Actions are in the footer</Card.Subtitle>
    <p>This card demonstrates how to use the footer component for actions.</p>
  </Card.Body>
  <Card.Footer>
    <div class="flex gap-2">
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Save</Button>
    </div>
  </Card.Footer>
</Card>
        

Complete Card Example

With header, body, and footer

This is a complete card example showing all sub-components working together with hover effects.

Share

Learn More Get Started

<Card hover>
  <Card.Header class="h-48">
    <img src="image.jpg" alt="Card image" class="w-full h-full object-cover" />
  </Card.Header>
  <Card.Body>
    <Card.Title>Complete Card Example</Card.Title>
    <Card.Subtitle>With header, body, and footer</Card.Subtitle>
    <p>This is a complete card example...</p>
  </Card.Body>
  <Card.Footer>
    <div class="flex gap-2 justify-between">
      <Button variant="ghost">Share</Button>
      <div class="flex gap-2">
        <Button variant="outline">Learn More</Button>
        <Button variant="primary">Get Started</Button>
      </div>
    </div>
  </Card.Footer>
</Card>