{ "name": "SectionCard", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/SectionCard.tsx", "chapterTag": "05 Cards & Surfaces", "chapter": "06-cards-and-surfaces.html", "sectionId": "section-card", "elName": "Section card", "demoUrl": "https://brand.magicblocks.ai/components/06-cards-and-surfaces#section-card", "hasLiveDemo": false, "description": "`` is exported with the `` subcomponent\nattached as a static property. v1.16.0 (R20-1).", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "SectionCard", "isPrincipal": true, "isType": false }, { "name": "SectionCardEmpty", "isPrincipal": false, "isType": false }, { "name": "SectionCardProps", "isPrincipal": false, "isType": false }, { "name": "SectionCardEmptyContent", "isPrincipal": false, "isType": false } ], "importStatement": "import { SectionCard } from \"@magicblocksai/ui\";", "props": [], "classesUsed": [ "av", "card", "empty", "hero", "section-card", "section-card-action", "section-card-body", "section-card-count", "section-card-empty", "section-card-empty-action", "section-card-empty-content", "section-card-empty-description", "section-card-empty-icon", "section-card-empty-title", "section-card-head", "section-card-head-text", "section-card-hero", "section-card-hero-body", "section-card-hero-sub", "section-card-hero-title", "section-card-icon", "section-card-subtitle", "section-card-title", "title" ], "examples": { "react": null, "html": "
\n
\n
\n

Tasks

\n 3\n + New task\n
\n
\n
    \n
    • \n
    • \n
    • \n
\n
\n
\n
\n
\n

Linked deals

\n + Link deal\n
\n
\n
\n \n \n \n

No deals linked yet

\n

Link a deal to track revenue against this contact.

\n
+ Link deal
\n
\n
\n
\n
", "css": ".av {\n width: 32px; height: 32px; border-radius: 50%;\n display: inline-flex; align-items: center; justify-content: center;\n font: 600 12px/1 var(--f-display); letter-spacing: 0.02em;\n flex-shrink: 0;\n overflow: hidden; /* clip image children cleanly */\n /* v1.12.0 (R11-2): default fill so initials are legible without consumers\n having to think about background. Pre-1.12.0 `.av` was background-less;\n on a same-tone page wash (e.g. warm-1) initials rendered invisible.\n Image children cover this fill via `overflow: hidden` clipping. */\n background: var(--bg-warm);\n color: var(--fg-soft);\n}\n\n.card {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-6) var(--s-6);\n display: flex; flex-direction: column; gap: var(--s-2);\n /* v1.9.0 (R6-2): cards now ship with `--sh-1` by default. On a same-\n colour page bg (the typical CRM detail-page setup) cards visually\n disappear with hairline + radius alone. Adding the small drop\n shadow gives the \"card feels like a card\" treatment that every\n product app reaches for. Marketing-grid contexts that explicitly\n want flat hairline-only cards opt out via `` (or\n `.card-flat`). */\n box-shadow: var(--sh-1);\n transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);\n}\n\n.empty {\n display: flex; flex-direction: column; align-items: center;\n text-align: center;\n padding: var(--s-9) var(--s-5);\n background: var(--bg-paper);\n border: 1px dashed var(--hair);\n border-radius: var(--r-lg);\n width: 100%; /* fill the grid slot / column */\n max-width: min(640px, 100%); /* cap on very wide single-column pages */\n margin: 0 auto;\n}\n\n.hero {\n position: relative;\n padding: var(--s-11) var(--s-6);\n background: var(--warm-3);\n border-radius: var(--r-xl);\n overflow: hidden;\n isolation: isolate;\n /* pinned warm surface — rescope type tokens to ink so copy stays legible in dark */\n --fg: var(--ink);\n --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);\n --fg-dim: color-mix(in oklab, var(--ink) 48%, transparent);\n --hair: rgba(25, 30, 50, 0.09);\n color: var(--fg);\n}\n\n.section-card {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.section-card-action {\n margin-left: auto;\n appearance: none;\n background: transparent;\n border: 0;\n font: 500 12px/1 var(--f-mono);\n color: var(--accent-text);\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n text-decoration: none;\n transition: color var(--dur-2) var(--ease);\n}\n\n.section-card-body {\n display: block;\n}\n\n.section-card-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 18px;\n padding: 0 6px;\n font: 600 11px/1 var(--f-mono);\n color: var(--fg-dim);\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-pill);\n}\n\n.section-card-empty {\n padding: var(--s-5);\n text-align: center;\n color: var(--fg-dim);\n font-size: 13px;\n}\n\n.section-card-empty-action {\n margin-top: var(--s-3);\n display: inline-flex; gap: var(--s-3); align-items: center;\n flex-wrap: wrap; justify-content: center;\n}\n\n.section-card-empty-content {\n display: flex; flex-direction: column; align-items: center;\n gap: var(--s-2);\n text-align: center;\n /* Cap copy width so longer descriptions stay readable inside narrow\n section cards (settings / detail-page rails). */\n max-width: 44ch;\n margin: 0 auto;\n}\n\n.section-card-empty-description {\n font: 400 13px/1.5 var(--f-body);\n color: var(--fg-dim);\n margin: 0;\n}\n\n.section-card-empty-icon {\n width: 40px; height: 40px; border-radius: 50%;\n display: inline-flex; align-items: center; justify-content: center;\n background: var(--warm-3);\n color: color-m" } }