Card Component - Rohit UI

Import

import { Card } from 'rohit-ui';

Examples

Basic Card

Card Title

This is a basic card with some content.

// Basic card
<Card title="Card Title">
  <p>This is the card content.</p>
</Card>

Card with Actions

This card has some action buttons.

// Card with custom header and footer
<Card
  header=<div className="custom-header">Custom Header</div>
  footer=<div className="custom-footer">Custom Footer</div>
>
  <p>Card content goes here.</p>
</Card>

Rohit Mode Card

✨ Fancy Card ✨

This card is extra special in Rohit Mode!

// Rohit Mode card
<Card
  title="UNNECESSARILY COMPLICATED"
  rohitMode
>
  <p>This card is unnecessarily dramatic!</p>
</Card>

Note: In Rohit Mode, the card will wiggle, change color, and sometimes display random emojis.

Props

Name	Type	Default	Description
title	string	-	Title of the card
children	ReactNode	-	Content of the card
elevated	boolean	false	Whether the card should have a raised appearance
className	string	-	CSS class to apply to the card
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Card component using styled-components:

import styled from 'styled-components';
import { Card } from 'rohit-ui';

const CustomCard = styled(Card)`
  background: linear-gradient(45deg, var(--win98-silver), white);
  border-width: 3px;
  border-style: dashed;
  
  h3 {
    font-family: 'Comic Sans MS', sans-serif;
    text-shadow: 2px 2px var(--win98-navy);
  }
`;

function MyComponent() {
  return (
    <CustomCard title="Custom Card">
      Custom styled card content
    </CustomCard>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Card component will:

Wiggle or bounce randomly
Change border color periodically
Add random emojis to the title
Sometimes rotate slightly
Draw unnecessary attention to itself