tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending

Overview

Eval results

Files

Card Components

Name: tessl/npm-reactstrap
Author: tessl

Bootstrap card components for displaying content in flexible containers with headers, bodies, footers, and various styling options.

Capabilities

Card

Bootstrap card container component providing flexible content container with padding and styling.

/**
 * Bootstrap card container component
 * @param props.inverse - Use inverse color scheme (deprecated)
 * @param props.color - Card background color theme
 * @param props.outline - Use outline card style
 * @param props.body - Apply card-body padding to direct children
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Card content components
 */
function Card(props: {
  inverse?: boolean;
  color?: string;
  outline?: boolean;
  body?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CardBody

Card body component providing the main content area with proper padding.

/**
 * Card body content area with padding
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Card body content
 */
function CardBody(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CardHeader

Card header component for titles and header content.

/**
 * Card header component
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Header content
 */
function CardHeader(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CardFooter

Card footer component for action buttons and secondary content.

/**
 * Card footer component
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Footer content
 */
function CardFooter(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CardTitle, CardSubtitle, CardText

Text components for card content with appropriate typography styling.

/**
 * Card title component with heading styling
 */
function CardTitle(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Card subtitle component with muted styling
 */
function CardSubtitle(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Card text component with paragraph styling
 */
function CardText(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CardImg

Card image component with positioning options.

/**
 * Card image component
 * @param props.top - Position image at top of card
 * @param props.bottom - Position image at bottom of card
 * @param props.tag - HTML element to render as (default: 'img')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 */
function CardImg(props: {
  top?: boolean;
  bottom?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  [key: string]: any;
}): JSX.Element;

Usage Examples

Basic Card

import { 
  Card, 
  CardBody, 
  CardTitle, 
  CardSubtitle, 
  CardText, 
  Button 
} from 'reactstrap';

function BasicCard() {
  return (
    <Card style={{ width: '18rem' }}>
      <CardBody>
        <CardTitle tag="h5">Card title</CardTitle>
        <CardSubtitle tag="h6" className="mb-2 text-muted">
          Card subtitle
        </CardSubtitle>
        <CardText>
          Some quick example text to build on the card title and make up the 
          bulk of the card's content.
        </CardText>
        <Button color="primary">Go somewhere</Button>
      </CardBody>
    </Card>
  );
}

Card with Image

import { Card, CardImg, CardImgOverlay, CardTitle, CardText } from 'reactstrap';

function ImageCard() {
  return (
    <Card>
      <CardImg top width="100%" src="/path/to/image.jpg" alt="Card image cap" />
      <CardBody>
        <CardTitle tag="h5">Card Title</CardTitle>
        <CardText>Card content goes here</CardText>
      </CardBody>
    </Card>
  );
}

Install with Tessl CLI