{
  "name": "MiniCardLinkList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MiniCardLink.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "mini-card-link",
  "elName": "Three linked companies inside a SectionCard",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#mini-card-link",
  "hasLiveDemo": false,
  "description": "Container for a stack of `<MiniCardLink>` rows. Composes naturally\ninside a `<SectionCard>` body slot. Renders as `<ul>` for screen-reader\ngrouping; rows are `<li>` with the anchor / button inside.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "MiniCardLink",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MiniCardLinkList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MiniCardMeta",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "MiniCardLinkProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MiniCardLinkListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MiniCardMetaProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { MiniCardLinkList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "`<MiniCardLink>` children."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class on the `<ul>`."
    }
  ],
  "classesUsed": [
    "hero",
    "mini-card",
    "mini-card-body",
    "mini-card-icon",
    "mini-card-list",
    "mini-card-meta",
    "mini-card-row"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"mini-card-list-demo\">\n  <div class=\"section-card\">\n    <header class=\"section-card-head\">\n      <h3 class=\"section-card-title\">Companies</h3>\n      <span class=\"section-card-count\">3</span>\n    </header>\n    <ul class=\"mini-card-list\">\n      <li class=\"mini-card-row\">\n        <a class=\"mini-card\" href=\"#\">\n          <span class=\"mini-card-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 14V4l5-2 5 2v10\"/><path d=\"M2 14h14\"/><path d=\"M5 7h1M9 7h1M5 10h1M9 10h1\"/></svg>\n          </span>\n          <span class=\"mini-card-body\">\n            BlueRock Health\n            <span class=\"mini-card-meta\">$12k MRR &middot; contracted</span>\n          </span>\n        </a>\n      </li>\n      <li class=\"mini-card-row\">\n        <a class=\"mini-card\" href=\"#\">\n          <span class=\"mini-card-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 14V4l5-2 5 2v10\"/><path d=\"M2 14h14\"/><path d=\"M5 7h1M9 7h1M5 10h1M9 10h1\"/></svg>\n          </span>\n          <span class=\"mini-card-body\">\n            Northpeak Logistics\n            <span class=\"mini-card-meta\">$4k MRR &middot; trial</span>\n          </span>\n        </a>\n      </li>\n      <li class=\"mini-card-row\">\n        <a class=\"mini-card\" href=\"#\">\n          <span class=\"mini-card-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 14V4l5-2 5 2v10\"/><path d=\"M2 14h14\"/><path d=\"M5 7h1M9 7h1M5 10h1M9 10h1\"/></svg>\n          </span>\n          <span class=\"mini-card-body\">\n            Skyhook Manufacturing\n            <span class=\"mini-card-meta\">$8k MRR &middot; expansion</span>\n          </span>\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>",
    "css": ".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.mini-card {\n  display: flex;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  text-decoration: none;\n  color: var(--fg);\n  background: transparent;\n  border: 0;\n  width: 100%;\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  transition: background var(--dur-1) var(--ease);\n}\n\n.mini-card-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  font: 500 13.5px/1.3 var(--f-body);\n  color: var(--fg);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mini-card-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--fg-dim);\n  flex-shrink: 0;\n}\n\n.mini-card-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.mini-card-meta {\n  margin-left: auto;\n  font: 400 12px/1.3 var(--f-mono);\n  color: var(--fg-dim);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.mini-card-row {\n  border-top: 1px solid var(--hair-soft);\n}"
  }
}