Card

A container that groups related content into a surface, with a fixed aspect ratio.

Installation

npm install @sipe-team/card

import '@sipe-team/card/styles.css';

Usage

Give the card a width; its height follows from the ratio. Content is centered inside it.

Card

Examples

Variant

filled (default) sits on a subtle background with a soft border; outline uses the default background with a stronger border; ghost is transparent with no border or padding.

filled

outline

ghost

Ratio

The card's height is derived from its width via aspect-ratio. rectangle (default) is 16:9; square is 1:1; wide is 21:9; portrait is 3:4; auto lets the content size the height.

16:9

1:1

21:9

3:4

auto

asChild

Drops the wrapping div and merges the card's styling onto the element it renders, so the card becomes a single element — here, an <a>.

Link card

Anatomy

import { Card } from '@sipe-team/card';

export default () => (
  <Card variant="filled" ratio="rectangle" style={{ width: 300 }}>
    Content
  </Card>
);

Renders a single <div role="presentation"> that centers its children.

API Reference

Renders a <div> (or the child element when asChild is set) and forwards its ref.

Prop	Type	Default	Description
variant	'filled' | 'outline' | 'ghost'	'filled'	Surface style — background, border, and padding.
ratio	'rectangle' | 'square' | 'wide' | 'portrait' | 'auto'	'rectangle'	aspect-ratio used to derive height from width.
asChild	boolean	false	Merge props onto the child instead of rendering a div.

Also accepts every ComponentProps<'div'> (className, style, onClick, …), forwarded to the rendered element. The element carries role="presentation".