{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "blog-grid",
    "type": "registry:component",
    "title": "Blog grid",
    "description": "A responsive grid of horizontal article cards with a cover image, reading time, title, author and date.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/blog-grid.html",
            "type": "registry:file",
            "target": "components/blog-grid.html",
            "content": "<!-- Blog grid\n     A grid of article cards. Each card is a horizontal layout: a cover image\n     with a reading-time chip on the left and the title, author and date on the\n     right. Swap the placeholder covers for real images. Marketing theme. -->\n\n<section class=\"dp-blog-grid\">\n  <a class=\"dp-blog-card\" href=\"/blog/saas-to-ai-transition/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"a\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">6 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">Reading the SaaS to AI transition through web data</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Mathijs Baas</span><span class=\"dp-blog-card-date\">29 days ago</span></p>\n    </div>\n  </a>\n\n  <a class=\"dp-blog-card\" href=\"/blog/getting-started-mcp/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"b\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">5 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">Getting started with the Dataprovider MCP: let AI query 350 million domains for you</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Gijs Barends</span><span class=\"dp-blog-card-date\">2 months ago</span></p>\n    </div>\n  </a>\n\n  <a class=\"dp-blog-card\" href=\"/blog/cloudflare-hosting/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"c\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">6 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">Cloudflare hides the hosting company. We found it anyway.</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Christian Branbergen</span><span class=\"dp-blog-card-date\">3 months ago</span></p>\n    </div>\n  </a>\n\n  <a class=\"dp-blog-card\" href=\"/blog/hidden-prompts-html/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"d\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">5 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">Hidden prompts in HTML: the invisible threat exploiting AI browsers</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Lucia Baldassini</span><span class=\"dp-blog-card-date\">6 months ago</span></p>\n    </div>\n  </a>\n\n  <a class=\"dp-blog-card\" href=\"/blog/billion-records-ai-navigator/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"e\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">5 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">How we talk to a billion records with our AI Navigator</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Tim Kreutz</span><span class=\"dp-blog-card-date\">7 months ago</span></p>\n    </div>\n  </a>\n\n  <a class=\"dp-blog-card\" href=\"/blog/websites-per-capita/\">\n    <div class=\"dp-blog-card-media\" data-tint=\"a\" aria-hidden=\"true\"><span class=\"dp-blog-card-time\">5 min</span></div>\n    <div class=\"dp-blog-card-body\">\n      <h3 class=\"dp-blog-card-title\">Websites per capita: how many websites does each EU country have per 1,000 inhabitants?</h3>\n      <p class=\"dp-blog-card-meta\"><span class=\"dp-blog-card-author\">Gijs Barends</span><span class=\"dp-blog-card-date\">8 months ago</span></p>\n    </div>\n  </a>\n</section>\n"
        },
        {
            "path": "components/blog-grid.css",
            "type": "registry:file",
            "target": "components/blog-grid.css",
            "content": "/* Blog grid\n   A responsive grid of horizontal article cards: a cover image with a\n   reading-time chip beside the title, author and date. Colour and type from\n   tokens.css (marketing theme). */\n\n.dp-blog-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: var(--dp-space-6);\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n.dp-blog-card {\n  display: grid;\n  grid-template-columns: 40% 1fr;\n  overflow: hidden;\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  text-decoration: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;\n}\n\n.dp-blog-card:hover {\n  border-color: var(--dp-border-strong);\n  box-shadow: var(--dp-shadow-md);\n  transform: translateY(-2px);\n}\n\n@media (max-width: 520px) { .dp-blog-card { grid-template-columns: 1fr; } }\n\n.dp-blog-card-media {\n  position: relative;\n  min-height: 10rem;\n  background: linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));\n}\n\n.dp-blog-card-media[data-tint=\"b\"] { background: linear-gradient(135deg, var(--dp-navy), var(--dp-blue-700)); }\n.dp-blog-card-media[data-tint=\"c\"] { background: linear-gradient(135deg, var(--dp-navy), #0b1236); }\n.dp-blog-card-media[data-tint=\"d\"] { background: linear-gradient(135deg, #0b1236, var(--dp-blue-700)); }\n.dp-blog-card-media[data-tint=\"e\"] { background: linear-gradient(135deg, var(--dp-gold-300), var(--dp-blue-200)); }\n\n@media (max-width: 520px) { .dp-blog-card-media { min-height: 9rem; } }\n\n.dp-blog-card-time {\n  position: absolute;\n  left: var(--dp-space-3);\n  bottom: var(--dp-space-3);\n  display: inline-flex;\n  align-items: center;\n  padding: var(--dp-space-1) var(--dp-space-2);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-text);\n  background: var(--dp-surface);\n  border-radius: var(--dp-radius-full);\n  box-shadow: var(--dp-shadow-sm);\n}\n\n.dp-blog-card-body {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--dp-space-6);\n  padding: var(--dp-space-5);\n}\n\n.dp-blog-card-title {\n  margin: 0;\n  font-size: var(--dp-text-lg);\n  line-height: var(--dp-leading-snug);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-blog-card-meta {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-1);\n  margin: 0;\n}\n\n.dp-blog-card-author {\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-blog-card-date {\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n"
        }
    ]
}