Card

Components/Content and structure

ImplementationHTML/CSS/JSArk/Zag — plannedReact · shadcn/Base UIAngular

Standalone directives that preserve article or button as the semantic root and apply the public Card anatomy.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and Elemento semântico nativo + composição Angular.

Loading functional preview…

Open the Angular playground

Interactive Card · Angular

Rendered by Angular directives on a native button with real selection.

Loading functional preview…

Open this example in Angular

Anatomy

1

2

Card Title 3

Description text

Body content goes here. This is a flexible slot for any content.

4

1 Container (.ds-card) — surface with border-radius, optional border or shadow depending on variant.
2 Content container (.ds-card__container) — applies inner padding and gap.
3 Header (.ds-card__header) — wrapper for optional title and description.
4 Body (.ds-card__body) — flexible content area.

Default

Card Title

Description or meta information

This is the card body content. It provides additional context or details about the subject of the card.

Outlined

Outlined Card

With a stronger border

Outlined cards use a more visible border to distinguish content sections clearly from the background.

Elevated

Elevated Card

Raised surface

Elevated cards use a raised surface and shadow instead of a border to create visual depth and hierarchy.

Comparison

Default

Subtle border.

Outlined

Stronger border.

Elevated

Raised surface.

Media and interactive

Card Title

Interactive cards derive from the outlined structure and add hover, focus, and selected states.

Custom composition

Use the card as a container when the inner content needs to be composed with other components. Header and footer are optional; the body hosts the primary content.

Usage 128 active seats

Healthy

Details

Token mapping

Property	Token	CSS variable
background	semantic.surface.default	--ds-surface-default
background (elevated variant)	semantic.surface.raised	--ds-surface-raised
border (default variant)	semantic.border.subtle	--ds-border-subtle
border (outlined variant)	semantic.border.default	--ds-border-default
shadow (elevated)	semantic.shadow.card	--ds-shadow-card
border-radius	component.card.radius.default	--ds-card-radius-default
border-width	component.card.border-width.default	--ds-card-border-width-default
.ds-card__container padding	component.card.container.padding.default	--ds-card-container-padding-default
.ds-card__container gap	component.card.container.gap.default	--ds-card-container-gap-default
.ds-card__header gap	component.card.header.gap.default	--ds-card-header-gap-default
.ds-card__title typography	component.card.title.{font-size,line-height,font-weight}.default	--ds-card-title-*-default
.ds-card__description typography	component.card.subtitle.{font-size,line-height,font-weight}.default	--ds-card-subtitle-*-default
.ds-card__body typography	component.card.body.{font-size,line-height,font-weight}.default	--ds-card-body-*-default
.ds-card__footer spacing	component.card.footer.gap.default	--ds-card-footer-gap-default
.ds-card--interactive border	component.card-interactive.border-*	--ds-card-interactive-border-*
.ds-card--interactive focus ring radius	component.card-interactive.focus-ring.radius.default	--ds-card-interactive-focus-ring-radius-default

Usage

When to use

• Content, metadata, and actions form a reusable or comparable unit.
• The surface needs to communicate its own grouping and hierarchy.

When not to use

• The content already has enough hierarchy without an additional surface.
• The interactive Card would need nested buttons or links; avoid nested interactive controls.

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import {
  TisCard,
  TisCardContainer,
  TisCardContent,
  TisCardHeader,
  TisCardTitle,
} from '@tis/angular/card'

Template

<article tisCard variant="outlined">
  <div tisCardContainer>
    <header tisCardHeader>
      <h3 tisCardTitle>Uso da organização</h3>
    </header>
    <div tisCardContent>128 licenças ativas.</div>
  </div>
</article>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/card

Primitive

Elemento semântico nativo + composição Angular

Status

Beta

Accessibility

Keyboard interaction

Cards have no keyboard interaction by default. If the card is interactive (clickable), wrap content in an <a> element or add role="link" with tabindex="0" to make it focusable and operable via Enter.

Accessibility

WCAG criterion	Requirement	Status
1.4.11 Non-text Contrast (AA)	Border or shadow must have at least 3:1 contrast against the page background	✓
2.5.8 Target Size min (AA)	If the card is clickable, the entire surface must be the click target	✓

Semantic markup

Cards are generic containers and do not require specific ARIA roles by default. Use semantic heading tags (<h2>, <h3>) for card titles to maintain proper document outline. If the entire card is clickable, wrap it in an <a> or <button> element, or use a single link inside the card with a clear accessible name.

Output responsibility

Preserve native button semantics, submit behavior, accessible names, disabled state, and visible focus.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference