Core / COMPONENT

Card

Web · implementedDesktop · preview

Container konten dengan header dan footer opsional.

import { Card } from "./vendor/syne-ui/index.js";TypeScript ready

Team workspace

A calm surface with clear hierarchy.

Ada Lovelace

Engineering team

Active

Try the controls above.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX

import { Card } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Card heading="Title" description="Summary">Content</Card>
  );
}

Make it yours

Use className and --syne-* tokens to match your design system.