Card

A container that groups related content and actions.

A surface container that groups related content and actions — tonal elevation on Material, frosted glass on iOS.

Installation

npx touchcn add card

Usage

<tcn-card>
  <h3>Weekly summary</h3>
  <p>You closed 12 tasks this week.</p>
</tcn-card>

import { TcnCard } from '@/components/ui/card';

<TcnCard>
  <h3>Weekly summary</h3>
  <p>You closed 12 tasks this week.</p>
</TcnCard>

<script setup lang="ts">
import { TcnCard } from '@/components/ui/card';
</script>

<template>
  <TcnCard>
    <h3>Weekly summary</h3>
    <p>You closed 12 tasks this week.</p>
  </TcnCard>
</template>

Props

TcnCard forwards all standard <div> attributes; content is projected as children.

Source · Angular

export * from './tcn-card';

import { Component } from '@angular/core';

@Component({
  selector: 'tcn-card',
  template: `
    <div class="tcn-card rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-4 text-[var(--color-on-surface)]">
      <ng-content />
    </div>
  `,
  host: { class: 'block' },
})
export class TcnCard {}

Source · React

export * from './tcn-card';

import { forwardRef } from 'react';
import type { ComponentPropsWithoutRef } from 'react';
import { cn } from '@touchcn/core';

export type TcnCardProps = ComponentPropsWithoutRef<'div'>;

export const TcnCard = forwardRef<HTMLDivElement, TcnCardProps>(function TcnCard({ className, children, ...props }, ref) {
  return (
    <div ref={ref} className={cn('block', className)} {...props}>
      <div className="tcn-card rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-4 text-[var(--color-on-surface)]">
        {children}
      </div>
    </div>
  );
});

Source · Vue

<template>
  <div class="block">
    <div
      class="tcn-card rounded-[var(--radius-lg)] bg-[var(--color-surface-container)] p-4 text-[var(--color-on-surface)]"
    >
      <slot />
    </div>
  </div>
</template>

export { default as TcnCard } from './TcnCard.vue';