{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-grid", "type": "registry:ui", "title": "Feature grid (MIAN)", "description": "Features as a ruled editorial grid or with icons, plus a check list for plans and specs.", "categories": [ "sections", "features", "feature grid", "benefits", "services" ], "registryDependencies": [ "https://mian.ro/r/mian-base.json" ], "files": [ { "path": "mian/components/feature-grid.css", "type": "registry:file", "target": "mian/components/feature-grid.css", "content": ".mn-features { display: grid; gap: clamp(2rem, 4cqi, 3rem) clamp(1.5rem, 4cqi, 3rem); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }\n@container mn (min-width: 40rem) { .mn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) { .mn-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }\n.mn-feature { display: grid; gap: .55rem; align-content: start; min-width: 0; }\n.mn-feature > * { margin: 0; }\n.mn-features-ruled .mn-feature { padding-top: 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .45rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); }\n.mn-feature-icon svg { width: 1.2rem; height: 1.2rem; }\n.mn-feature-title { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); }\n.mn-feature p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; text-wrap: pretty; }\n.mn-checklist { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }\n.mn-checklist > li { position: relative; padding-inline-start: 1.65rem; line-height: 1.5; }\n.mn-checklist > li::before {\n content: \"\"; position: absolute; left: 0; top: .18em; width: 1.1em; height: 1.1em; background: var(--mn-primary-text);\n -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\") center / contain no-repeat;\n mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\") center / contain no-repeat;\n}\n.mn-checklist > li.mn-off { color: var(--mn-muted); }\n.mn-checklist > li.mn-off::before { background: var(--mn-input); -webkit-mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); -webkit-mask-size: 70% 100%; mask-size: 70% 100%; }" }, { "path": "mian/examples/feature-grid.html", "type": "registry:file", "target": "mian/examples/feature-grid.html", "content": "\n
\n
\n \n
\n
\n\n\n
\n
\n \n \n
\n
" } ], "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/feature-grid", "meta": { "mian": { "license": "LicenseRef-MIAN-1.0", "requiresJs": false, "classes": [ "mn-features", "mn-features-ruled", "mn-feature", "mn-checklist" ], "accessibility": [ "Feature titles are headings (

under the section’s

).", "Icons are decorative (aria-hidden): the title carries the meaning.", "mn-checklist marks are CSS: for “not included” items add visually hidden text such as “Not included:”.", "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview." ], "intents": [ "features list", "services list", "what we do", "capabilities", "benefits", "plan features checklist" ] } } }