Tarjeta

Categoría: Contención
Tokens: comp.card
Nivel: Base

Descripción general

Web: tanrei-card; schedule
SwiftUI: TanreiCard; schedule
Jetpack Compose: TanreiCard; schedule
Flutter: TanreiCard; schedule
React Native: Card; schedule

Generado a partir de docs/status/status.json, specs/card.spec.json

Variantes

Outlined

Los ingresos crecieron un 12% respecto al trimestre anterior.

Filled

Los ingresos crecieron un 12% respecto al trimestre anterior.

Elevated

Los ingresos crecieron un 12% respecto al trimestre anterior.

Una tarjeta tiene tres formas. Una tarjeta simple es un contenedor: su contenido conserva su propia semántica y puede incluir botones y enlaces. Una tarjeta interactiva es un solo botón. Una tarjeta de enlace, es decir, una tarjeta con href, es un solo enlace. Usa una tarjeta de enlace cuando activarla lleve a la persona a otra página o dirección, y una tarjeta interactiva cuando algo ocurra donde la persona está.

Uso

Los ejemplos de Web y React muestran la especificación actual. SwiftUI, Compose, Flutter y React Native van rezagados: ofrecen la tarjeta simple y la interactiva, y todavía no la tarjeta de enlace. Sus ejemplos muestran lo que ofrecen.

<!-- Una tarjeta que no es una acción: su contenido conserva su propia semántica y puede incluir botones. -->
<tanrei-card>
  <h3 class="tanrei-text-heading-5">Informe trimestral</h3>
  <p class="tanrei-text-body">Los ingresos crecieron un 12% respecto al trimestre anterior.</p>
  <tanrei-button variant="text">Compartir</tanrei-button>
</tanrei-card>

<!-- Una sola acción: toda la tarjeta es un botón, que recibe su nombre de label. Nada interactivo dentro. -->
<tanrei-card variant="elevated" interactive label="Informe trimestral">…</tanrei-card>

<!-- Un solo enlace: con href toda la tarjeta es un ancla, que recibe su nombre de label. Nada interactivo dentro. -->
<tanrei-card href="/reports/q3/" label="Informe trimestral">…</tanrei-card>

<!-- Un enlace que abre una pestaña nueva lo dice con tus palabras. La tarjeta no dibuja ninguna marca: pon el glifo en tu contenido. -->
<tanrei-card href="https://example.com/reports/q3.pdf" target="new" target-label="se abre en una pestaña nueva" label="Informe trimestral">
  <h3 class="tanrei-text-heading-5">Informe trimestral</h3>
  <span class="tanrei-icon" aria-hidden="true">open_in_new</span>
</tanrei-card>

<!-- inset es true de forma predeterminada, así que su atributo es el inverso: flush deja que una foto llegue a los bordes. -->
<tanrei-card flush>
  <img src="cover.jpg" alt="" />
  <div style="padding: var(--tanrei-comp-card-container-padding)">…</div>
</tanrei-card>

<script type="module">
  import '@tanrei/web/components/card';
  document.querySelector('[interactive]').addEventListener('click', openReport);

  // Una tarjeta de enlace emite click antes de que el navegador siga la dirección. Un enrutador del lado del cliente lo cancela.
  document.querySelector('tanrei-card[href]').addEventListener('click', (event) => {
    event.preventDefault();
    router.push(event.currentTarget.href);
  });
</script>

import { Card } from '@tanrei/react';

<Card variant="filled">
  <h3 className="tanrei-text-heading-5">Informe trimestral</h3>
  <p className="tanrei-text-body">Los ingresos crecieron un 12% respecto al trimestre anterior.</p>
</Card>
<Card interactive label="Informe trimestral" onClick={openReport}>…</Card>
<Card href="/reports/q3/" label="Informe trimestral">…</Card>
<Card href="https://example.com/reports/q3.pdf" target="new" targetLabel="se abre en una pestaña nueva" label="Informe trimestral">…</Card>
<Card inset={false}>…</Card>

import Tanrei

TanreiCard(variant: .filled) {
    Text("Informe trimestral")
    Text("Los ingresos crecieron un 12% respecto al trimestre anterior.")
}

// El inicializador que recibe action: es la tarjeta interactiva.
TanreiCard(label: Text("Informe trimestral"), action: openReport) { ReportSummary() }
    .disabled(isLoading)

import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.components.TanreiCard
import io.github.chnotchy.tanrei.primitives.TanreiText
import io.github.chnotchy.tanrei.tokens.TanreiCardVariant

// Sin onClick la tarjeta no es una acción, así que puede incluir botones.
TanreiCard(variant = TanreiCardVariant.Filled) {
    TanreiText("Informe trimestral")
    TanreiText("Los ingresos crecieron un 12% respecto al trimestre anterior.")
    TanreiButton(text = "Compartir", onClick = ::share)
}

// La sobrecarga con onClick es una sola acción. enabled = false la deshabilita.
TanreiCard(onClick = ::openReport, contentDescription = "Informe trimestral") {
    TanreiText("Informe trimestral")
    TanreiText("Los ingresos crecieron un 12% respecto al trimestre anterior.")
}

import 'package:tanrei/tanrei.dart';

TanreiCard(
  variant: TanreiCardVariant.filled,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      const Text('Informe trimestral'),
      const Text('Los ingresos crecieron un 12% respecto al trimestre anterior.'),
      TanreiButton(onPressed: share, child: const Text('Compartir')),
    ],
  ),
);

// Un onTap no nulo convierte toda la tarjeta en una sola acción; enabled: false la deshabilita.
TanreiCard(
  onTap: openReport,
  semanticLabel: 'Informe trimestral',
  child: const ReportSummary(),
);

import { Text } from 'react-native';
import { Card, useContentColor } from '@tanrei/react-native';

// Una cadena simple se dibuja con el estilo body y el color de contenido de la tarjeta.
<Card variant="filled">Los ingresos crecieron un 12% respecto al trimestre anterior.</Card>

// Con onPress la tarjeta es una sola acción, que recibe el nombre de su encabezado.
<Card accessibilityLabel="Informe trimestral" onPress={openReport}>
  <ReportSummary />
</Card>

// Tu propio texto lee el color de contenido de la tarjeta: React Native no tiene color de texto heredado.
function ReportSummary() {
  const color = useContentColor();
  return <Text style={{ color }}>Los ingresos crecieron un 12% respecto al trimestre anterior.</Text>;
}

Especificaciones

A ras, interactiva y deshabilitada

A ras: el contenido llega a los bordes.

Informe trimestral

Interactiva: pasa el cursor por encima, llega a ella con Tab, púlsala.

Informe trimestral

Interactiva y deshabilitada.

Tarjetas de enlace

Botón

Una tarjeta de enlace. Enter la sigue, y el menú de enlaces del navegador funciona en ella.

Lista

Se abre en una pestaña nueva. El glifo forma parte del contenido.

Botón

Una tarjeta de enlace deshabilitada: no hay nada que seguir.

Anatomía

Dibujado sobre el fixture outlined, tal como lo dibuja el paquete web.

Parte	Descripción
1 `container`	The shape that holds the content, clips it to its corners and, for an interactive card, carries hover, focus and press.
2 `outline` · opcional	The border of the outlined variant.
3 `content`	Whatever the product puts in the card. The card does not lay it out; it only insets it, clips it and hands it a content color.
4 `focus-ring` · opcional	Gap-then-ring indicator shown for keyboard focus of an interactive card.

Propiedades

Propiedad	Tipo	Valor predeterminado	Descripción
`variant`	`elevated` \| `filled` \| `outlined`	`"outlined"`	How the card separates from its background: by depth (elevated), by tone (filled) or by an edge (outlined). Pick by the background, not by importance. A design system may add values.
`interactive`	`boolean`	`false`	Makes the whole card one pressable action (it emits click). Its content must then contain no other interactive element. A card whose action is to go somewhere takes href instead and is a link, not a button.
`disabled`	`boolean`	`false`	Prevents interaction and removes an interactive card or a link card from the focus order. Ignored unless interactive is true or href is set: a card that is neither an action nor a link cannot be disabled.
`href`	`string`	`""`	The destination: an address as the platform's links take one (a URL; on the web a path or a fragment as well). Not empty, it makes the whole card one link — a link card — whether interactive is set or not: the link role, one tab stop, activated by pointer, touch or Enter and not by Space, opened by the platform as its own links are, and drawn exactly as an interactive card is (CRD-19, CRD-20). Its content must then contain no other interactive element, as an interactive card's.
`target`	`same` \| `new`	`"same"`	Where the destination opens. same: where the person is — the same tab on the web, the app's own handling of the address elsewhere. new: a new context — a new tab or window on the web, outside the current screen elsewhere — which the card says through targetLabel; the card draws no mark, because its content is the product's (CRD-21). Ignored without href.
`targetLabel`	`string`	`""`	What assistive technology reads after the link's name while target is new ("opens in a new tab"). Tanrei ships no words of its own, so the product gives them in its own language, as it gives a chip its removeLabel. Required while target is new; ignored otherwise.
`inset`	`boolean`	`true`	Insets the content by the card's padding. Set it to false for content that reaches the card's edges (a photo on top); that content pads its own text.
`label`	`string`	`""`	The accessible name. For an interactive card or a link card, normally the text of its heading; without it the whole content becomes the name. For a card that is neither, a label makes it a named group.

Slots

Slot	Descripción
`default`	The content: any layout of media, text and — only when interactive is false and href is empty — actions.

Eventos

Evento	Descripción
`click`	An interactive card or a link card was activated by pointer, touch, keyboard or assistive technology. A link card emits it before its destination opens; a product that takes the navigation itself (a client-side router) cancels it (CRD-20).

Estados

Comportamiento

Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.

ID	Requisito
`CRD-1`	WHEN the user activates an interactive card by pointer, touch, Enter or Space — a link card (CRD-19) by pointer, touch or Enter — THE card SHALL emit click exactly once.
`CRD-2`	WHILE disabled is true and either interactive is true or href is not empty THE card SHALL NOT emit click, SHALL NOT be focusable and SHALL expose the disabled state to assistive technology.
`CRD-3`	WHILE an interactive card is hovered, keyboard-focused or pressed THE card SHALL render its container, outline, elevation, content color and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
`CRD-4`	WHEN an interactive card receives keyboard focus THE card SHALL show the focus ring without animation; focus gained by pointer or touch SHALL NOT show it.
`CRD-5`	WHERE the visual size of an interactive card is below the minimum target THE card SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch.
`CRD-6`	WHILE disabled is true and either interactive is true or href is not empty THE card SHALL render its container, outline, elevation, content color and opacity from the disabled component tokens of its variant.
`CRD-7`	WHEN variant names a value that the active design system does not have THE card SHALL render with the default value's tokens, and in debug builds report the unknown value.
`CRD-8`	WHEN the card is pressed by pointer, touch, Enter or Space THE card SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. A press — held, or moved with the pointer down — SHALL NOT select the card's text nor start a drag of it: the card is one action, as a button is, and the platform keeps a button's text from selection.
`CRD-9`	WHILE pressed THE card SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; content color, outline, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.card.motion.feedback-duration with comp.card.motion.state-easing, fades over comp.card.motion.state-duration with comp.card.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`CRD-10`	THE card SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`CRD-11`	WHILE interactive is false and href is empty THE card SHALL NOT be focusable, SHALL NOT emit click, SHALL NOT draw a hover, focus or press answer, SHALL ignore disabled, and SHALL render from the resting tokens of its variant.
`CRD-12`	WHILE inset is true THE card SHALL place its content comp.card.container.padding inside the container on every side; WHILE inset is false the content SHALL reach the container's edges. In both cases THE card SHALL clip its content to the container's shape, draw the outline of the outlined variant (comp.card.outline.width wide) above the content, and grow with its content: the card has no height of its own.
`CRD-13`	THE card SHALL hand its content the content color of its variant and state (comp.card.outlined.content.color for outlined at rest, and so on) as the platform's inherited foreground (the web's inherited color, SwiftUI's foreground style, Compose's content color, Flutter's default text and icon style); on React Native, which has no inherited text color, it SHALL provide the color through the Tanrei context that Tanrei's text components read. Plain text given as content, where the platform must style it, SHALL take sys.typescale.body.
`CRD-14`	WHILE interactive is true THE card SHALL be exactly one focusable element with the button role (the link role WHILE href is not empty, CRD-19), named by label, over a name the product gives it on the element (aria-label or aria-labelledby), or, WHILE label is empty, by the name the product gives it on the element — aria-label, or aria-labelledby naming an element — or else by the text of its content merged in reading order, and in debug builds SHALL report, WHILE it has neither label nor a name of the product's, that it has no label; WHILE interactive is false and href is empty THE card SHALL have no role of its own and leave its content's semantics untouched, except that WHERE label is set it SHALL be a group named by label.
`CRD-15`	WHILE interactive is true or href is not empty THE card's content SHALL contain no interactive element (button, link, field, toggle or anything else focusable); a platform that can inspect its content (the web, on every slot change) SHALL report one in debug builds, and a platform that cannot SHALL state the rule in its README and docs page.
`CRD-16`	WHEN the elevation or the colors of an interactive card change between states THE card SHALL animate the change over comp.card.motion.state-duration with comp.card.motion.state-easing, and SHALL change them at once where motion is reduced.
`CRD-17`	WHEN the layout direction is right-to-left THE card SHALL apply its padding and clipping by logical start and end so that it mirrors, SHALL grow a ripple from the point of contact as in left-to-right, and SHALL NOT mirror its content itself: the content follows the layout direction.
`CRD-18`	THE card SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the card is shown THE card SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.
`CRD-19`	WHILE href is not empty THE card SHALL be a link card, whether interactive is true or false: exactly one focusable element with the link role and not the button role, named as CRD-14 names an interactive card, its content presentational and held to CRD-15; the platform's own link to href (the web's anchor element; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, and the address shown before it is followed — is the platform's, and not the card's to draw or to take over; and everything this spec says of an interactive card other than its role and its keys — its states, focus ring, minimum target, press answer, corners, motion and disabled look (CRD-3 to CRD-6, CRD-8 to CRD-10, CRD-16) — SHALL hold for a link card from the same tokens, with no look of its own for a link and none for a destination already visited.
`CRD-20`	WHEN the user activates a link card by pointer, touch or Enter THE card SHALL emit click exactly once and then open href where target names, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL show the pressed state as CRD-8 and CRD-9 say and SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE card SHALL NOT activate a link card on Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE card SHALL leave them to the platform.
`CRD-21`	WHILE the card is a link card and target is new THE card SHALL open href in a new context — on the web a new tab or window that is given no handle to the page that opened it; on the other platforms outside the screen the person is on, as the platform's opener decides. THE card SHALL draw no mark of its own for it, because its content is the product's to lay out (CRD-12): a product that shows that the card opens elsewhere puts the glyph open_in_new of the system's icon set in the content, through the icon helper. WHILE target is new THE card SHALL expose targetLabel as its description, read after its name and role, and WHILE targetLabel is empty SHALL still render and in debug builds report that a link that opens a new context does not say so. WHILE target is same THE card SHALL ignore targetLabel.
`CRD-22`	WHILE href is not empty and disabled is true THE card SHALL NOT be a link that can be followed: it SHALL render as CRD-6 says, SHALL expose the link role with the disabled state and no destination, SHALL NOT be focusable, SHALL NOT emit click, and SHALL open nothing by any means the platform gives a link (on the web the anchor carries no href, so there is no context menu entry, no drag and no new tab for it).
`CRD-23`	WHEN target names a value the card does not define THE card SHALL behave as same, and in debug builds report the unknown value. IF href is only white space, or names a script to run rather than a place to go (the web's javascript: scheme), or cannot be read as an address by the platform, THE card SHALL be the card its interactive makes it, without a destination, and in the last two cases report it in debug builds.
`CRD-24`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE card SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the card is invalid — except those the card owns (aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE card SHALL take it off that element. WHEN the product sets an aria- attribute the card owns THE card SHALL report it in debug builds.

Correspondencia de nombres por plataforma

Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Componente	`tanrei-card`	`TanreiCard`	`TanreiCard`	`TanreiCard`	`Card`
`variant` · Propiedad	`variant`	`variant`	`variant`	`variant`	`variant`
`interactive` · Propiedad	`interactive`	`action`	`onClick`	`onTap`	`onPress`
`disabled` · Propiedad	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`href` · Propiedad	`href`	`destination`	`href`	`href`	`href`
`target` · Propiedad	`target`	`target`	`target`	`target`	`target`
`targetLabel` · Propiedad	`targetLabel`	`targetLabel`	`targetLabel`	`targetSemanticLabel`	`targetLabel`
`inset` · Propiedad	`inset`	`inset`	`inset`	`inset`	`inset`
`label` · Propiedad	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`click` · Evento	`click`	`action`	`onClick`	`onTap`	`onPress`
Notas	The content is the default slot. `inset` is a boolean property that defaults to true; its attribute is the inverse `flush`, because an HTML boolean attribute cannot default to true. `click` fires only while interactive is true and disabled is false. With `href` the shadow root holds an `<a part="container">` around the slot in place of the element with role button; `click` then fires for a link card too. The link form: `href` is the `href` attribute; `target` is the `target` attribute with the values `same` and `new` (the HTML spellings `_self` and `_blank` are read as those two; anything else is `same` and reported); `targetLabel` is the `target-label` attribute. Web-only, forwarded to the anchor and to nothing else: `rel` (to which `new` adds `noopener`) and `download`. Cancelling `click` (`preventDefault()`) cancels the navigation, which is how a client-side router takes it; a modified or a middle click is the browser's. A disabled link is the anchor without `href`, with `role="link"` and `aria-disabled="true"`, as the navigation drawer's destination already is. Space is not handed to the press controller. `element.click()` follows the link.	SwiftUI idiom (as `Button`): the initializer that takes `action:` makes the card interactive; the one without it is a plain container. `disabled` follows `.disabled(_:)`; `label` sets `accessibilityLabel`. Content is a `@ViewBuilder`. Not built on this platform yet: the initializer that takes `destination: URL` in place of `action:` draws the same control as a SwiftUI `Link`, so the address is opened by the environment's `openURL` — an app that routes addresses itself provides an `OpenURLAction`, which is how the navigation is cancelled — and VoiceOver reads the link trait. `target: TanreiLinkTarget = .same` and `targetLabel` (the accessibility hint) are parameters of that initializer alone.	Compose idiom (as `Card`): the overload with a non-null `onClick` is interactive; `enabled` is the inverse flag. Content is a `ColumnScope` lambda and reads the content color from `LocalTanreiContentColor` and plain text's style from `LocalTanreiTextStyle`, Tanrei's own locals (the package does not depend on Material, whose `LocalContentColor` it would otherwise be). Not built on this platform yet: the overload that takes `href: String` (`onClick` is then optional and called first) opens the address through `LocalUriHandler.current` after `onClick`; an app that routes addresses itself provides its own `UriHandler`. Compose has no link role for a clickable element (only link annotations inside text), so the node drops `Role.Button` and carries no role, and the README says so. `target: TanreiLinkTarget = TanreiLinkTarget.Same`; `targetLabel` is appended to the node's state description.	Flutter idiom: a non-null `onTap` makes the card interactive. `enabled: false` disables it while keeping its interactive look (as `ListTile`), because a null `onTap` already means not interactive. Content is `child`. Not built on this platform yet: the `TanreiCard.link` constructor (`href` is a `Uri`) has `Semantics(link: true)` with the address as its `linkUrl`. The package has no plugin dependency, so the address is opened by the nearest `TanreiLinkOpener`, an inherited widget the app provides once (calling `url_launcher`, or its own router); without one the control opens nothing and reports it in debug builds. `target` is a `TanreiLinkTarget`; `targetSemanticLabel` is the semantics hint.	A non-null `onPress` makes the card interactive (an accessible `Pressable` with the button role); without it the card is a `View`. Content is `children`. Not built on this platform yet: a Card with `href` has `accessibilityRole="link"` and opens the address with `Linking.openURL` after `onPress`, unless `onPress` called `event.preventDefault()`. `target` is `"same" \| "new"`; `targetLabel` is the `accessibilityHint`.

Tokens

Token	Alias de	Valor resuelto (claro)
`--tanrei-comp-card-container-padding`	`sys.space.space200`	16px
`--tanrei-comp-card-container-shape`	`sys.shape.corner.medium`	8px
`--tanrei-comp-card-disabled-opacity`	—	0.38
`--tanrei-comp-card-elevated-container-color`	`sys.color.surface-container-lowest`	#ffffff
`--tanrei-comp-card-elevated-container-elevation`	`sys.elevation.level2`	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
`--tanrei-comp-card-elevated-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-card-elevated-disabled-container-color`	—	#ffffff
`--tanrei-comp-card-elevated-disabled-container-elevation`	—	0px 0px 0px 1px rgb(0 0 0 / 0.08)
`--tanrei-comp-card-elevated-disabled-content-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-disabled-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-elevated-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-card-elevated-focused-container-color`	—	#e8e8e8
`--tanrei-comp-card-elevated-focused-container-elevation`	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
`--tanrei-comp-card-elevated-focused-content-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-focused-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-elevated-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-hovered-container-color`	—	#ededed
`--tanrei-comp-card-elevated-hovered-container-elevation`	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 1px 0px rgb(0 0 0 / 0.04), 0px 4px 8px -4px rgb(0 0 0 / 0.04), 0px 16px 24px -8px rgb(0 0 0 / 0.06)
`--tanrei-comp-card-elevated-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-hovered-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-elevated-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-elevated-pressed-container-color`	—	#e8e8e8
`--tanrei-comp-card-elevated-pressed-container-elevation`	—	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04)
`--tanrei-comp-card-elevated-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-pressed-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-elevated-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-elevated-state-layer-color`	`comp.card.elevated.content.color`	#1b1b1b
`--tanrei-comp-card-filled-container-color`	`sys.color.surface-container-highest`	#eeeeee
`--tanrei-comp-card-filled-container-elevation`	`sys.elevation.level0`
`--tanrei-comp-card-filled-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-card-filled-disabled-container-color`	—	#eeeeee
`--tanrei-comp-card-filled-disabled-container-elevation`	—
`--tanrei-comp-card-filled-disabled-content-color`	—	#1b1b1b
`--tanrei-comp-card-filled-disabled-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-filled-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-card-filled-focused-container-color`	—	#d9d9d9
`--tanrei-comp-card-filled-focused-container-elevation`	—
`--tanrei-comp-card-filled-focused-content-color`	—	#1b1b1b
`--tanrei-comp-card-filled-focused-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-filled-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-filled-hovered-container-color`	—	#dddddd
`--tanrei-comp-card-filled-hovered-container-elevation`	—
`--tanrei-comp-card-filled-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-card-filled-hovered-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-filled-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-filled-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-filled-pressed-container-color`	—	#d9d9d9
`--tanrei-comp-card-filled-pressed-container-elevation`	—
`--tanrei-comp-card-filled-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-card-filled-pressed-outline-color`	—	#000000 · 0%
`--tanrei-comp-card-filled-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-filled-state-layer-color`	`comp.card.filled.content.color`	#1b1b1b
`--tanrei-comp-card-focused-opacity`	—	1
`--tanrei-comp-card-hovered-opacity`	—	1
`--tanrei-comp-card-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-card-motion-state-duration`	`sys.motion.role.state.large`	250ms
`--tanrei-comp-card-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-card-outline-width`	`sys.border.hairline`	1px
`--tanrei-comp-card-outlined-container-color`	`sys.color.surface`	#ffffff
`--tanrei-comp-card-outlined-container-elevation`	`sys.elevation.level0`
`--tanrei-comp-card-outlined-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-card-outlined-disabled-container-color`	—	#ffffff
`--tanrei-comp-card-outlined-disabled-container-elevation`	—
`--tanrei-comp-card-outlined-disabled-content-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-disabled-outline-color`	—	#000000 · 8%
`--tanrei-comp-card-outlined-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-card-outlined-focused-container-color`	—	#e8e8e8
`--tanrei-comp-card-outlined-focused-container-elevation`	—
`--tanrei-comp-card-outlined-focused-content-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-focused-outline-color`	—	#000000 · 8%
`--tanrei-comp-card-outlined-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-hovered-container-color`	—	#ededed
`--tanrei-comp-card-outlined-hovered-container-elevation`	—
`--tanrei-comp-card-outlined-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-hovered-outline-color`	—	#000000 · 8%
`--tanrei-comp-card-outlined-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-outline-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-card-outlined-pressed-container-color`	—	#e8e8e8
`--tanrei-comp-card-outlined-pressed-container-elevation`	—
`--tanrei-comp-card-outlined-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-pressed-outline-color`	—	#000000 · 8%
`--tanrei-comp-card-outlined-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-card-outlined-state-layer-color`	`comp.card.outlined.content.color`	#1b1b1b
`--tanrei-comp-card-pressed-opacity`	—	1

Fixtures

Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.

`variant: elevated` (2)

elevated

variant: elevated

elevated-disabled

variant: elevated interactive: true disabled: true label: Quarterly report

`variant: filled` (2)

filled

variant: filled

filled-link-new

variant: filled href: https://example.com/tanrei target: new targetLabel: opens in a new tab label: Source

`variant: outlined` (6)

outlined

variant: outlined

outlined-flush

variant: outlined inset: false

outlined-interactive

variant: outlined interactive: true label: Quarterly report

outlined-disabled

variant: outlined interactive: true disabled: true label: Quarterly report

outlined-link

variant: outlined href: /getting-started/ label: Getting started

outlined-link-disabled

variant: outlined disabled: true href: /getting-started/ label: Getting started

Generado a partir de specs/card.spec.json, tokens/comp/card.tokens.json, design/tokens/

Pautas

Cuándo usarlo

Usa una tarjeta para agrupar contenido sobre un mismo asunto, como un informe, una persona, un producto o un ajuste, y separarlo de lo que lo rodea. La tarjeta solo aplica el margen interior, el recorte y el color a su contenido. Tú dispones el contenido con los estilos de texto de Tanrei (heading-5 para el título de una tarjeta) y con sus componentes.

Haz interactiva toda la tarjeta cuando sea una sola acción que abre lo que muestra. Si necesita varias acciones, mantenla no interactiva y pon botones dentro.

Una tarjeta con destino es un enlace

Un control con destino es un enlace, y eso vale también para una tarjeta. Cuando activar la tarjeta solo lleve a la persona a otra página, dale href en lugar de gestionar un clic en una tarjeta interactiva. La tarjeta es entonces un enlace real, que en la web es un ancla alrededor de su contenido. Las personas pueden abrirla en una pestaña nueva, copiar su dirección y ver adónde lleva antes de seguirla, y la tecnología de apoyo anuncia un enlace, no un botón. Las tarjetas que llevan de una página de este sitio a otra son tarjetas de enlace.

Una tarjeta de enlace se ve exactamente igual que una tarjeta interactiva en todos los estados. No hay aspecto de enlace ni estado visitado.
href prevalece sobre interactive: una tarjeta con ambos es un enlace.
Enter sigue una tarjeta de enlace. Espacio no: hace lo mismo que en cualquier enlace, que en la web es desplazar la página.
click se emite primero, y después se abre el destino. Cancela el clic para encargarte tú de la navegación, como hace un enrutador del lado del cliente.
target es same (el valor predeterminado) o new. Un enlace que abre una pestaña o una ventana nueva necesita targetLabel, las palabras que se leen después de su nombre, como «se abre en una pestaña nueva». Tanrei no incluye textos propios. La tarjeta no dibuja ninguna marca para ello, porque el contenido es tuyo: pon el glifo open_in_new en el contenido si quieres mostrar una.
Una tarjeta de enlace deshabilitada no se puede seguir de ningún modo y sale del orden del foco.
Un href que solo contiene espacios en blanco no es un destino. Una dirección javascript:, o una que no se puede leer como dirección, se rechaza y se notifica en las compilaciones de depuración, y la tarjeta es lo que sería sin ella.

Cuando una tarjeta necesite un destino y además acciones propias, mantenla simple y convierte su encabezado en un enlace, o pon dentro un Button con href.

Cómo elegir una variante

Elige según el fondo, no según la importancia.

Variante	Separa mediante	Úsala para
Outlined (predeterminada)	Un borde	La mayoría de las tarjetas, y las tarjetas sobre una superficie del mismo tono que una tarjeta filled.
Filled	Un tono	Tarjetas sobre una superficie lisa, donde el tono basta para marcar el grupo. Una tarjeta filled desaparece sobre una superficie del mismo tono.
Elevated	La profundidad	Contenido que queda por encima de la página, como un elemento fijado o que se puede arrastrar.

Evita

No pongas un botón, un enlace, un campo, un conmutador ni nada que pueda recibir el foco en una tarjeta interactiva o en una tarjeta de enlace. La tecnología de apoyo no puede llegar a ello, y una pulsación sobre ello también activaría la tarjeta.
No navegues desde el controlador de clic de una tarjeta interactiva. Una tarjeta que lleva a algún sitio recibe href.
No deshabilites una tarjeta simple. Ahí disabled se ignora, porque no hay ninguna acción ni enlace que deshabilitar.
No uses la elevación para ordenar las tarjetas por importancia.

Accesibilidad

Rol: button (link while href is set)
Etiquetado: The role is button while interactive is true and link while href is set; otherwise the card has no role, or is a group when label is set. An interactive card's or a link card's name is label — normally its heading's text — or, without one, its whole content read as one string (reported in debug builds). Their content is presentational: its headings and images are read as part of the name, not as separate elements. While target is new, targetLabel is a link card's description.
Objetivo mínimo: El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px

Teclado

Teclas	Acción
`Tab`	Moves focus to an interactive card or a link card. A card that is neither is not a tab stop; focus moves through its content.
`Enter` / `Space`	Activates an interactive card. A link card is activated by Enter alone: Space does what it does on any link (on the web it scrolls the page).

Notas

Never nest interactive elements in an interactive card or a link card: assistive technology cannot reach them (the card is one element) and a press on them would also activate the card. A card that needs its own buttons or links stays plain, and its primary action or destination is one of them: a heading that is a link, or a link Button.
Web: an interactive card draws a shadow element with role button and tabindex 0 around the slot (not a <button>, whose content model forbids block content); Enter activates on keydown and Space on keyup, as a native button does. A link card draws an anchor around the slot instead, which HTML allows around block content that holds nothing interactive. In debug builds either inspects the slotted content on every slotchange for focusable or interactive descendants and reports them.
SwiftUI, Compose, Flutter and React Native merge the content into the one accessible element (SwiftUI's button, Compose's merged clickable semantics, Flutter's merged semantics, React Native's accessible Pressable). None of them can reliably detect a nested interactive element, so each states the rule in its README; their tests assert that the merged element is the only one exposed.
Text size does not clip a card: it grows with its content at 200% text size.
How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
A card with a destination is a link: one element with the link role, the platform's own link, Enter and not Space, so that on the web the card can be opened in a new tab and its address copied. No visited state is drawn.
A link card that opens a new context says so through targetLabel. The card draws no mark of its own, since it does not lay out its content; a product that shows one puts the glyph open_in_new of the system's icon set in the content, where the icon helper mirrors it in a right-to-left layout.

Generado a partir de specs/card.spec.json, tokens/sys/measure.tokens.json

De qué se encarga el componente

Una tarjeta que no es interactiva no tiene rol y no toca la semántica de su contenido. Con un label es un grupo que recibe de él su nombre.
Una tarjeta interactiva es un solo elemento que puede recibir el foco, con el rol de botón, y expone su estado deshabilitado. Su nombre es label o, si no lo hay, todo su contenido leído como una sola cadena. Las compilaciones de depuración notifican que falta la etiqueta.
Una tarjeta de enlace es un solo elemento que puede recibir el foco, con el rol de enlace, y recibe su nombre del mismo modo. Mientras target sea new, targetLabel es su descripción, que se lee después de su nombre y su rol. Una tarjeta de enlace deshabilitada conserva el rol de enlace, expone el estado deshabilitado y no tiene destino.
Enter y Espacio activan una tarjeta interactiva, y solo Enter una tarjeta de enlace. El área de pulsación cumple el objetivo mínimo, y el indicador de foco se muestra solo para el foco del teclado.
Crece con su contenido, así que el texto grande nunca se recorta.
En la web, las compilaciones de depuración notifican, en cada cambio de slot, un elemento interactivo dentro de una tarjeta interactiva o de una tarjeta de enlace, y también una tarjeta de enlace que abre una pestaña nueva sin targetLabel.

Carencias conocidas por plataforma:

SwiftUI, Compose, Flutter y React Native todavía no tienen tarjeta de enlace. En ellas, una tarjeta que lleva a algún sitio sigue siendo una tarjeta interactiva que navega desde su acción.
Web: un elemento interactivo añadido más tarde, a mayor profundidad dentro de un elemento que ya está en la tarjeta, no se notifica.
Web: una tarjeta que no es interactiva nunca produce un clic propio, pero un clic en su contenido es un clic corriente del DOM y se propaga a través de la tarjeta.
SwiftUI, Compose, Flutter y React Native no pueden detectar un elemento interactivo anidado, así que no lo comprueban. Cumplir la regla te corresponde a ti.
React Native: una tarjeta no interactiva con etiqueta es un grupo, pero iOS no asigna ningún rasgo a ese rol. No se ha verificado en un dispositivo si VoiceOver anuncia el nombre del grupo.
Compose: la activación con Enter y Espacio mediante la gestión de teclas de la plataforma solo se ha probado con Robolectric, todavía no en un dispositivo.
React Native no tiene color de texto heredado. La tarjeta dibuja una cadena simple con su color de contenido; tu propio texto lo lee con useContentColor().
SwiftUI: una tarjeta interactiva más pequeña que el objetivo mínimo conserva su tamaño visible, pero ocupa en el diseño el tamaño del objetivo.

Qué debes hacer tú

Dale un label a una tarjeta interactiva o a una tarjeta de enlace. Sin él, todo el contenido se lee como un único nombre largo.
Dale a una tarjeta de enlace que abre una pestaña o una ventana nueva un targetLabel en el idioma de tu producto.
Mantén las tarjetas interactivas y las tarjetas de enlace libres de otros controles. Cuando una tarjeta necesite botones o enlaces propios, mantenla simple y deja que uno de ellos sea su acción o su destino principal.
Da su propia semántica a los encabezados, las imágenes y el resto del contenido de una tarjeta no interactiva: texto alternativo, niveles de encabezado. La tarjeta no añade ninguna.

Código fuente e incidencias en GitHub

Descripción general

Uso

Especificaciones

Anatomía

Propiedades

Slots

Eventos

Estados

Comportamiento

Correspondencia de nombres por plataforma

Tokens

Fixtures

variant: elevated (2)

variant: filled (2)

variant: outlined (6)

Pautas

Cuándo usarlo

Una tarjeta con destino es un enlace

Cómo elegir una variante

Recomendado

Evita

Accesibilidad

Teclado

Notas

De qué se encarga el componente

Qué debes hacer tú

`variant: elevated` (2)

`variant: filled` (2)

`variant: outlined` (6)