Feature grid

Pass features as data, with an optional icon snippet, image, badge and link on each. The grid lays them out and lines their rows up; an empty list renders the introduction without a grid. Presentational only: it does not filter, sort, paginate or fetch features, and it does not load, size or lazy-load images beyond the native loading attribute.

Suggested location

src/lib/components/feature-grid-01

Required props

features

Limitations

• Rows line up with CSS subgrid (Chrome 117, Safari 16, Firefox 71 and later). Older browsers still show a clean grid; only the cross-card alignment is lost.
• A last card alone on its row spans the row and takes the rail layout, unless it has an image; any other short last row leaves plain panel space after its cards.
• Images are cropped to 16:10 with object-cover. Supply art that survives that crop, and give it width, height and alt text.
• When a feature has both an image and an icon, only the image is shown.
• parts/FeatureCard.svelte is an internal renderer; its positioning, padding, hover and focus styles come from the grid, so render cards through FeatureGrid, even a single one.

Example

<script lang="ts">
	import FeatureGrid from '$lib/components/feature-grid-01/FeatureGrid.svelte';
	import type { Feature } from '$lib/components/feature-grid-01/types';

	const features: Feature[] = [
		{ title: 'Boards', description: 'Columns of your own, with an owner and a due date on every card.', icon: boardIcon },
		{ title: 'Timelines', description: 'Drag a bar to move a date; linked cards follow.' },
		{
			title: 'Audit log',
			description: 'See who changed what, and export it as CSV.',
			badge: 'Business',
			link: { label: 'About the audit log', href: '/features/audit-log' }
		}
	];
</script>

{#snippet boardIcon()}
	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
		<rect x="3.75" y="4.75" width="16.5" height="14.5" rx="2" />
		<path d="M9.25 4.75v14.5M14.75 4.75v14.5" />
	</svg>
{/snippet}

<FeatureGrid
	eyebrow="Features"
	title="One set of cards, three ways to work with them"
	description="Boards, timelines and the audit log all read from the same cards."
	{features}
	columns={3}
	action={{ label: 'See every feature', href: '/features' }}
/>

Change features through the features prop and retone the section through seven --feature-grid-* CSS variables. The accent colours the icons and the focus rings; everything else is text, hairlines, the control border and the filled panel surface.

• Content: add, remove or reorder features. Keep titles to a few words and descriptions to one to three sentences; the grid keeps rows aligned whatever the length, but very uneven copy leaves space under the short cards.
• Columns: three suits six or nine features, four suits eight short ones, two suits four longer ones or cards with images. Pick a count that divides by the columns so the last row is full.
• Surface: cardVariant="bordered" for a ruled panel, "plain" for an editorial list with a rule above each card, "filled" for one softer tinted panel on consumer sites.
• Icons: pass an icon snippet that draws a 24px inline SVG with stroke="currentColor" and stroke-width 1.5. It is drawn in the accent, without a tile behind it.
• Images: give each feature an image of the same aspect; it runs to the cell edges in bordered and filled panels and is rounded in plain cards. A badge sits on the line above the title, at the end, beside the icon when there is one.
• Links: a feature with link makes the whole card clickable, with the link label at the foot; the title is added to the link's accessible name so repeated labels stay distinct.
• Accent: set --feature-grid-accent for icons and focus rings; links and arrows stay in the ink colour because they are secondary actions. The default is near-black, so the section renders monochrome until you choose a colour.
• Worked retone for a dark page: --feature-grid-ink: #fafafa; --feature-grid-muted: #a1a1aa; --feature-grid-hairline: rgb(255 255 255 / 0.1); --feature-grid-control-border: rgb(255 255 255 / 0.5); --feature-grid-surface: #18181b; --feature-grid-accent: #fafafa; --feature-grid-on-accent: #09090b.
• Layout: the column classes are written out in FeatureGrid.svelte (columnClass); edit them there to change breakpoints. Card order inside a card lives in parts/FeatureCard.svelte.
• A single feature, or a last card alone on its row, spans the row and takes a rail: its mark and title in the first third, the description and link beside them.

Public CSS variables

• The section is labelled by its heading through aria-labelledby; without a title it is an unnamed section.
• Cards are a list (ul with role="list", so Safari keeps list semantics without bullets); card titles are headings one level below the section heading.
• A linked card keeps its heading and text as plain content; only the link is interactive. Its box stretches over the card, and its accessible name is the link label followed by the card title, so repeated labels stay distinct.
• Focus shows as a two-pixel accent ring inside the linked card, and on the footer link around the control; both use :focus-visible.
• Icons are hidden from assistive technology; the title carries the meaning. Images need alt text from the consumer, or an empty alt when the copy already says what they show.
• Headings and ids come from $props.id(), so several grids on one page never share ids.
• The hover tone and arrow nudge on linked cards last 150ms; under prefers-reduced-motion the arrow does not move.

Known limitations

• Text inside a linked card cannot be selected by dragging, because the link covers the card.
• A link's visible box is its label; the card is the pointer target, but automated target-size checks that read the anchor's own box report it as small.

Integration

• Presentational
• Works without client-side JavaScript
• Server-side rendering supported

Dependencies

No additional runtime packages beyond Svelte and Tailwind CSS

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 (Published) Current release · 30 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.