BLOCK

Feature Grid

Dreispaltiges Feature-Grid mit klarer Informationshierarchie.

testedORIGINAL
Live Preview
Playground

Implementierungen

HTML · HTML + CSS + JS

index.html

<section class="features"><header><span>Features</span><h2>Alles an einem Ort</h2></header><div class="grid"><article><b>Live Preview</b><p>Komponenten direkt in verschiedenen Viewports testen.</p></article><article><b>Trust Center</b><p>Lizenz, Datenschutz und Security nachvollziehbar prüfen.</p></article><article><b>Builder</b><p>Bausteine zu kompletten Seiten zusammensetzen.</p></article></div></section><style>.features{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:1120px;margin:auto;padding:64px 24px}.features header{max-width:620px;margin-bottom:28px}.features header span{color:#6d28d9;font-weight:800}.features h2{font-size:2.4rem;margin:.25em 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}article{padding:24px;border:1px solid #e4e4e7;border-radius:14px}article b{font-size:1.15rem}article p{color:#52525b;line-height:1.55}@media(max-width:760px){.grid{grid-template-columns:1fr}}</style>