Jonas Ulrich julrich

Hero

<div> · .l-container.l-container--hero

Hero component for displaying a prominent visual section with headline, subheadline, text, and call-to-action buttons.

The Hero component in its default configuration appears as a large, empty white rectangle with a thin border, suggesting a placeholder for content. It lacks any visible text, images, or buttons, giving it a minimalistic and unadorned look. The absence of elements like a headline or call-to-action buttons makes it appear as a blank canvas ready for customization.

Anatomy

root — <div> · container
visual — `` · slot

kickstartDS Component Contracts PRD vs. Knapsack Design System Contract

Last updated: 2026-09-26

Compares kickstartds-component-contracts-prd.md (internal PRD, 2026-08-03) against the published open format knapsack-oss/design-system-contract (format v0.1, spec v0.11.0, 2026-09-24).

Sources:

Release PRD: v2.0.1 (post-2.0.0 fixes)

Goal

Cut a patch release v2.0.1 of @kickstartds/telekom-salespartner-kit that bundles the 13 follow-up fixes landed on main after v2.0.0 (form-field behaviour and styling, header/footer regressions, missing icon/font, copy corrections). Produce all release artifacts (snapshots, diffs, changelog, per-module docs), publish to npm, integrate into the sibling website-toolkit repo.

Here's how I'd approach it. Quick summary of what's in place today so the plan is grounded:

The Image from @unpic/react/nextjs is wired up centrally in ComponentProviders.tsx — i.e. there's one funnel for every image render.
Storyblok URLs flow through as https://a.storyblok.com/f/<space>/<WxH>/<hash>/<name> (visible in types/components-presets.json). The <hash> is a perfect dedup key.
The project is already targeted at Cloudflare (wrangler.jsonc, open-next.config.ts).

Recommended shape

1. Don't do the upload inside getStaticProps. Do the rewrite there, but the upload in a dedicated pre-build step.

DESIGN.md

Overview

A modern, professional design system for a content-rich corporate website built with kickstartDS. The visual language balances clean professionalism with a distinct teal-green brand identity. The design favors generous whitespace, clear typographic hierarchy, and subtle depth through shadows and border radiuses. Accessibility and responsive scaling are first-class concerns — typography, spacing, and layout all scale fluidly across breakpoints using a factor-based token system.

The overall feel is confident and structured, with a 3-tier token architecture (branding → semantic → component) that ensures consistency at every level while remaining fully themeable.

Colors

Neue Seite von Grund auf erstellen

Wann verwenden

Der Editor möchte eine neue Seite in Storyblok erstellen und beschreibt den gewünschten Inhalt in natürlicher Sprache – z.B. „Erstelle eine Landing Page für unser neues Produkt mit Hero, Features und FAQ".

Voraussetzungen

Der Editor hat eine grobe Vorstellung vom Seiteninhalt (Thema, Zweck, Zielgruppe)
Optional: Texte, Bilder oder URLs als Ausgangsmaterial

Content Operations – n8n Workflows mit dem Storyblok MCP Server

This document describes automation workflows that editors can build using n8n connected to the Storyblok MCP Server via an MCP client node. Each workflow combines MCP tools with external n8n nodes to automate content production, quality assurance, and housekeeping.

	{
	"$format": "kickstartds/component-contract@1",
	"anatomy": {
	"children": [
	{
	"classes": [],
	"element": "span",
	"namedBy": "content-match",
	"path": "root/label",
	"presence": "always",

	{
	"name": "hero",
	"display_name": "Hero",
	"created_at": "2026-05-13T09:04:40.556Z",
	"updated_at": "2026-05-13T09:04:40.556Z",
	"id": 25,
	"schema": {
	"headline": {
	"id": 0,
	"pos": 0,

	export default defineStackbitConfig({
	stackbitVersion: "~0.6.0",
	ssgName: "custom",
	devCommand: [
	"npm run _assemble:build:tokens",
	"npx @11ty/eleventy --serve --port={PORT} --incremental --config=scripts/stackbit.eleventy.js",
	].join(" && "),
	experimental: {
	ssg: {
	name: "eleventy",