Collections · Creator Design System

Snippets collection

CSS and JS worth a permalink, on .c-snippet — a language tag and a code preview that fades rather than truncates.

A code library. .c-snippet carries a language tag and a code preview that fades out under a mask, so a card shows enough to recognise the snippet without becoming a wall of code in a grid.

Open /snippets → Open one snippet →

A preview that fades rather than truncates

The mask is the whole idea: a hard cut at a fixed height implies the snippet ends there, and a fade implies it continues — which is true.

A grid that wraps itself css 1
2
3
4

display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-4);

.c.c-snippet · .c__lang · .c__code with a mask-image fade