The Loop block library

Engineering 6 min read 2026-06-08 ← All posts

Every structa.cloud page is composed from the blocks in this post. A section is a StructBlock with a Django template; the page is a StreamField of those sections; the server renders finished HTML.

The hero block

One block, one template. The editor picks a badge, a title, a subtitle and optional CTAs — no design system negotiation, no custom page builder.

The fragment

The template is deliberately plain: a section, a heading, a paragraph. It is what HTMX swaps when a fragment request comes in — the same road as the full page, so the two can never drift.

variants & screenshots

See it in each edition

A screenshot per variant — open any one to jump straight to the live preview.

Block library

The StreamField blocks this very site is composed from.

See Loop ↗

code sections

The code

The full code this deep dive walks through — copy the patterns into your own project.

A StreamField section block

python

class HeroBlock(blocks.StructBlock):
    badge = blocks.CharBlock(max_length=80, required=False)
    title = blocks.CharBlock(max_length=200)
    subtitle = blocks.TextBlock(required=False)
    primary_cta = ButtonBlock(required=False)

    class Meta:
        template = 'content/blocks/hero.html'
        label = 'Hero'

Server-rendered fragment

html

<section class="container-fusion py-20 text-center">
  <h1 class="text-4xl font-bold sm:text-6xl">{{ value.title }}</h1>
  {% if value.subtitle %}<p class="mx-auto mt-6 max-w-2xl text-lg text-fu-muted">{{ value.subtitle }}</p>{% endif %}
</section>

The hero block

The fragment

See it in each edition

The code

Comments

A useful first release beats a noisy roadmap

Sign in