{
"$schema": "../manifest.schema.json",
"schemaVersion": "1.2.0",
"name": "ds-card",
"description": "Card container for content",
"docUrl": "https://design.soracom.io/design-system/elements/card/",
"category": "elements",
"htmlElements": [
"div",
"a"
],
"isWebComponent": false,
"modifiers": {
"color": {
"support": "all"
},
"gradient": {
"support": "all"
},
"visual-state": {
"support": "all"
},
"variant": {
"support": "custom",
"values": [
"--panel",
"--details",
"--tiled",
"--plain",
"--simple",
"--outline",
"--diagram",
"--clickable"
]
},
"size": {
"support": "subset",
"values": [
"--small",
"--large"
]
},
"layout": {
"support": "custom",
"values": [
"--center",
"--middle",
"--centered",
"--limit",
"--horizontal"
]
},
"state": {
"support": "subset",
"values": [
"--loading",
"--loading-refresh"
]
},
"icon": {
"support": "all"
},
"indent": {
"support": "all"
},
"gap": {
"support": "all"
}
},
"cssCustomProperties": [
{
"name": "--ds-card-width",
"default": "auto",
"description": "Card width"
},
{
"name": "--ds-card-height",
"default": "auto",
"description": "Card height"
},
{
"name": "--ds-card-text-color",
"default": "var(--color-contrast, var(--color-default))",
"description": "Card text color, also supplied to child content"
},
{
"name": "--ds-card-background-color",
"default": "var(--color, var(--color-gray-bright))",
"description": "Base card background and contrasting child-content color. Outline and hover styles adjust the painted background independently."
},
{
"name": "--ds-card-border-color",
"default": "var(--color-transparent)",
"description": "Card border color"
},
{
"name": "--ds-card-border-width",
"default": "0px",
"description": "Card border width"
},
{
"name": "--ds-card-border-style",
"default": "solid",
"description": "Card border style"
},
{
"name": "--ds-card-border-radius",
"default": "12px",
"description": "Card corner radius, shared by rows at the card edge"
},
{
"name": "--ds-card-indent",
"default": "var(--space-medium)",
"description": "Base content inset, adjusted by --indent-* modifiers"
},
{
"name": "--ds-card-v-indent",
"default": "var(--ds-card-indent)",
"description": "Vertical content inset, adjusted by --v-indent-* modifiers"
},
{
"name": "--ds-card-h-indent",
"default": "var(--ds-card-indent)",
"description": "Horizontal content inset, adjusted by --h-indent-* modifiers"
},
{
"name": "--ds-card-gap",
"default": "var(--space-xsmall)",
"description": "Content spacing, adjusted by --gap-* modifiers"
}
],
"usageNotes": [
"Cards use a single content column between two grid gutter tracks sized by --ds-card-h-indent, with vertical padding sized by --ds-card-v-indent. Children keep their own padding inside this column.",
"Images, dividers, datatables and banners span the full width and bleed to the card edge when first or last. Headers, footers, figures and icons are panels: they span the full width, keep the card indent inside their background, and share the card corners when first or last. A footer also keeps a full card indent of whitespace above its tint, except directly after media or an icon, where it sits flush. Children with --highlight or --outdent are tiles: they span the full width, extend into the adjacent row gaps, and use the row gap as their vertical inset, keeping the card indent only at the card edge. A pinned tag, close, edit or control button never counts as a row, so a trailing close button leaves the footer at the card edge, and the row after a pinned tag reaches the top edge with extra inset to clear the tag. Standard cards retain their grid row gap.",
"Tiled cards remove the grid row gap and turn every child into a tile, except media, panels and positioned controls, so the gap modifiers size the vertical inset of each tile instead. Wrap a component that manages its own inset in a plain element to keep it.",
"Card rows stretch to fill spare height, so a single banner or image fills a taller card. Use --center to center grid items and text horizontally and --middle to center the content vertically when the card has spare height. Use --centered for both axes, or combine --center and --middle. Child components can override the inherited text alignment. Cards with an in-flow footer stretch their rows to keep the footer at the bottom, including with --middle or --centered.",
"Use --gap-* for both axes, --v-gap-* or --h-gap-* for individual axes, and --no-v-gap or --no-h-gap to remove an axis gap. Horizontal cards use one gap track between the icon and content; gap modifiers also apply inside the ds-rows wrapper, which keeps its own padding.",
"For --horizontal, place one ds-icon before a ds-rows wrapper containing the card content. The icon stretches beside the content; --square gives it a tinted background and divider. Icon size modifiers control the panel width. An optional footer spans both columns. Horizontal cards in ds-cols --uniform share card heights without subgrid content-row alignment.",
"Use the documented --ds-card-* properties for overrides. Properties prefixed with --_card- are private implementation details.",
"With --outline, --color-* supplies the card foreground and its paired contrast color is used for child content. Transparency and hover tints affect only the painted background. Explicit child --color-* modifiers take precedence. Nested cards start an independent color palette rather than inheriting the outer card palette.",
"Apply --gradient-* to the card for named or color gradients, including direction suffixes such as -to-right. Gradient cards use the theme background beneath the gradient and --gradient-text-color for the foreground. Text inherits this color without passing a --color palette to nested components. Explicit --color-* modifiers take precedence; override --ds-card-text-color when needed. Nested surfaces need their own gradient modifier, and plain icons retain their component defaults."
],
"structure": {
"parts": {
"pinnedTag": {
"element": "span",
"alternativeElements": [
"p"
],
"selector": ".ds-tag.--pinned",
"optional": true,
"position": [
"first"
]
},
"close": {
"element": "button",
"selector": ".__close",
"optional": true,
"position": [
"first",
"last"
]
},
"media": {
"element": "i",
"alternativeElements": [
"img",
"figure"
],
"optional": true
},
"footer": {
"element": "footer",
"alternativeElements": [
"div",
"button"
],
"selector": "footer, .__footer",
"optional": true,
"position": [
"last"
]
}
},
"patterns": {
"basic": "