co-drive-card

Tarjeta de elemento de Drive con chip de selección en la esquina, anillo de selección y estrella. La variante folder es una fila; la variante file es una columna con una región de miniatura (slot thumb).

Demo

Ver código

<co-drive-card variant="folder" name="Campañas 2026" meta="18 elementos · 240 MB" starred></co-drive-card>

API

Props

Prop	Atributo	Tipo	Default	Descripción
accent	accent	string	'var(--co-color-primary-azul)'	Accent CSS color driving the icon tile, selection ring and select chip.
active	active	boolean	false	(file) Whether the item is the active/current item — draws a heavier inset ring.
density	density	"comfy" | "compact"	'comfy'	Vertical rhythm / sizing.
ext	ext	string | undefined	—	(file) File extension used to render a default <co-file-type-tile> in the foot when the `type` slot is empty.
meta	meta	string	''	Muted secondary line (meta).
name	name	string	''	Primary label (name).
selected	selected	boolean	false	Whether the item is selected. Controlled — parent updates it on coToggleSelect.
starred	starred	boolean	false	Whether the item is starred.
variant	variant	"file" | "folder"	'folder'	Which layout to render.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
coOpen	void	✓	✓	Fired when the card is activated (click / Enter / Space).
coStar	void	✓	✓	Fired when the star affordance is clicked.
coToggleSelect	boolean	✓	✓	Fired when the select chip is toggled — emits the NEW selected state.

Slots

Slot	Descripción
actions	(file) The fading action affordance in the foot row.
thumb	(file) The thumbnail region at the top of the card.
trailing	(folder) Trailing content after the star (e.g. a dots menu).
type	(file) The file-type tile in the foot row. Falls back to <co-file-type-tile> when `ext` is set.

CSS Parts

Part	Descripción
::part(actions)
::part(card)
::part(foot)
::part(meta)
::part(name)
::part(select)
::part(star)
::part(thumb)
::part(tile)
::part(trailing)

CSS Custom Properties

Este componente no expone CSS custom properties.