Feature Showcase
A comprehensive demonstration of every section type and configuration option available in the Scaffold template. Themed around public interest technology, digital rights, and internet freedom.
Hero Sections
The hero section type displays a prominent page header with a title and optional subtitle. It can also include a full-bleed background image.
Props: title (required), subtitle, backgroundImage, image, imageAlt, imagePosition (left/right), align (center/left)
Privacy is a Human Right
Building technology that respects the people who use it.
A hero can also carry a side image — an illustration or photo beside the text rather than behind it. The text left-aligns automatically, and imagePosition picks the column.
Data Stays With Its Community
Local storage, local governance, and no silent copies in someone else's cloud.
Rich Text Sections
The richText section renders markdown content with full formatting support. It supports background colors, the highlight background type, and an optional table of contents sidebar for long-form content.
Props: content (required), withTOC, background.bgColor, background.bgType
Plain Rich Text
This section demonstrates standard markdown formatting. Rich text sections are the backbone of content pages — they render any valid markdown with full support for inline formatting, lists, links, and images.
Here is bold text, italic text, and inline code. You can also use links and create structured content:
- Unordered list item one
- Unordered list item two
- Nested items work too
- Like this sub-item
- Ordered lists are also supported
- With automatic numbering
- And proper indentation
Blockquotes can highlight important ideas. Privacy by design means building consent and transparency into the architecture itself, not bolting it on as an afterthought.
Horizontal rules separate content visually, and images can be embedded inline:
Table of Contents Example
When withTOC: true is set, a sidebar navigation appears on desktop showing all headings. This is useful for long-form documentation, policy pages, or research reports.
Digital Rights Framework
A digital rights framework establishes the principles and standards that protect people's fundamental freedoms in digital spaces. It encompasses everything from data protection to algorithmic transparency.
Privacy by Design
Privacy by design is an approach to systems engineering that takes privacy into account throughout the whole engineering process. The concept is an example of value-sensitive design, which takes human values into account in a well-defined manner throughout the process.
Open Source Governance
Open source governance models define how decisions are made in open source projects. From benevolent dictator models to consensus-based democratic processes, governance shapes the long-term sustainability of community-driven software.
Data Sovereignty
Data sovereignty refers to the idea that data is subject to the laws and governance structures within the jurisdiction it is collected. For communities and nations, this means maintaining control over data about their people and processes.
Algorithmic Accountability
As automated decision-making systems increasingly affect people's lives, algorithmic accountability ensures these systems can be examined, questioned, and corrected when they produce harmful outcomes.
Digital Accessibility
Accessibility in digital spaces means designing technology that works for everyone, regardless of ability. This includes screen reader compatibility, keyboard navigation, color contrast, and cognitive load considerations.
Community-Centered Design
Community-centered design shifts the focus from individual users to the communities they belong to. It asks not just "does this work for a person?" but "does this strengthen the community's capacity for self-determination?"
Embedded content
YouTube
Vimeo
Bluesky
Mastodon
Gradient Background
Rich text sections can use a gradient background by setting bgColor: gradient. This creates a subtle primary-to-highlight gradient that works well for callouts or featured content blocks.
This variation is useful for drawing attention to key messages without using a full hero section.
Highlight Background
Setting bgType: highlight renders the decorative highlight SVG as an absolute-positioned background. This creates a distinctive, branded visual treatment for special content sections.
Dark Backgrounds
Backgrounds come from a single palette in src/utils/backgrounds.ts: white, gray, gradient, primary-light, secondary-light, highlight-light, dark and highlight-dark. Each one is marked light or dark, and dark ones invert the content automatically — body text, links, inline code and ghost buttons all stay readable without any per-section styling.
To add a colour, add one entry to the palette and the matching option to background_select in .pages.yml.
Button Sections
The button section displays a row of call-to-action buttons. Each button has a variant (primary, secondary, outline, ghost), a size (sm, md, lg, xl) and an optional icon.
A button's destination is a link: either an internal page picked from a list in the CMS, or an external URL. External links open in a new tab. For anything else — an anchor like #section or a mailto: link — use the href field instead; link wins when both are set.
Props: title, buttons[] with text, link, href, variant, size, icon
All Four Variants (medium)
All Three Sizes (primary)
Icons, External Links and Custom URLs
Card Sections
The card section displays a grid of cards with optional images, content, and per-card buttons. Cards support a color prop (primary, secondary, highlight, neutral) that changes their visual treatment. Section-level buttons appear below the grid.
Props: title (required), description, cards[] with title, content, image, button, color, plus buttons[] for section-level CTAs
Card Color Variants
Each card below demonstrates a different color accent. Colors replace the default dotted border with a solid tinted treatment.
Primary Color
Uses a warm primary tint with a solid primary border. Good for highlighting the main offering or recommended option.
Secondary Color
Uses a cool secondary tint with a matching border. Useful for complementary content that supports the primary message.
Highlight Color
Uses the decorative highlight SVG as a background, matching the section-level highlight treatment. Eye-catching for featured cards.
Neutral Color
Uses a subtle gray tint with a gray border. Best for supplementary information that should not compete visually with colored cards.
Default Cards (No Color)
Without a color prop, cards use the default dotted primary border treatment.
Encrypted Messaging
End-to-end encrypted communication tools that protect conversations from surveillance and unauthorized access.
Secure File Sharing
Zero-knowledge file sharing platforms where only the intended recipients can decrypt and access shared documents.
Privacy-First Analytics
Web analytics that respect visitor privacy by design, collecting only aggregate data without personal identifiers.
People Sections
The people section displays team member cards, optionally filtered by category. Categories are defined in src/content/categories/people.json and assigned to people via their sections field.
Props: category (optional filter)
Available categories: Leadership, Engineering, Product, Design, Marketing, Sales, Operations, Community
Partners Sections
The partners section displays partner logos in a grid, optionally filtered by category. Partners are defined as individual data files with category, image, and URL fields.
Props: title (required), category (optional filter)
Available categories: sponsor, infrastructure, community, technology, media
All Partners
Articles Roll Section
The articlesRoll section displays a feed of recent articles with optional filtering by category. It supports a configurable limit and a "View All" link.
Props: title, limit (default 3), category, showViewAll
Latest Articles
View All Articles
Designing Accessible Interfaces with Modern CSS
By Emily Rodriguez
February 20, 2024
Digital accessibility is a civil rights issue. When interfaces exclude people with disabilities, they exclude people from participating in civic life. Modern CSS gives us powerful…
Building Privacy-First Websites with Astro
By Sarah Chen, David Kim
January 15, 2024
When building websites for advocacy organizations and public interest groups, performance and privacy go hand in hand. Astro's architecture makes it a natural fit for projects…
Featured Articles Section
The featuredArticles section shows articles an editor picks by hand, in the order they were picked. Use it for reading lists and "start here" collections; use articlesRoll when you want the latest articles automatically.
Props: title (heading), description, articles[] (permalinks, up to 6)
Start Here
Three pieces we point every new collaborator to.
Designing Accessible Interfaces with Modern CSS
By Emily Rodriguez
February 20, 2024
Digital accessibility is a civil rights issue. When interfaces exclude people with disabilities, they exclude people from participating in civic life. Modern CSS gives us powerful…
Building Privacy-First Websites with Astro
By Sarah Chen, David Kim
January 15, 2024
When building websites for advocacy organizations and public interest groups, performance and privacy go hand in hand. Astro's architecture makes it a natural fit for projects…
Featured Partners Section
The featuredPartners section showcases specific partners by ID, with an optional description and a configurable display limit. Useful for sponsor spotlights or curated partner lists.
Props: title, description, partners[] (IDs), limit (default 4), showViewAll
Our Sponsors
Organizations supporting the mission of building technology for the public good.
Logo Wall Section
The logoWall section shows partner logos only — no cards, no text. Pick partners in the order you want them, or leave the list empty to show every featured partner. The scroll layout loops the logos in a row that pauses on hover, on keyboard focus and with its pause button, and stays still for visitors who prefer reduced motion. fullBleed lets the row run edge to edge.
Props: title (heading), description, partners[] (IDs), layout (grid/scroll), fullBleed
Funded by People Who Care About the Open Web
Resources Roll Section
The resourcesRoll section displays a feed of resources (reports, guides, whitepapers, case studies) with a configurable limit and optional description.
Props: title (default "Resources"), description, limit (1-12, default 3), showViewAll
Research & Resources
Reports, guides, and case studies on building equitable technology.
Privacy-Preserving API Design Guide
Best practices for designing APIs that minimize data collection, enforce consent boundaries, and protect user privacy. Covers data minimization, audit logging, and anonymization patterns.
Authors: Michael Brown, Emily Rodriguez
State of Digital Rights Technology 2024
Annual report analyzing the landscape of privacy tools, encrypted communications, and open source civic technology. Based on survey data from 120 public interest technology organizations worldwide.
Authors: Priya Sharma, Alex Turner
Threat Modeling for Civic Technology Platforms
A framework for identifying and mitigating security threats in civic technology, from voter registration systems to community health dashboards. Includes risk matrices and mitigation playbooks.
Authors: Sarah Chen, David Kim
Rebuilding a Civic Platform for Accessibility: A Case Study
How a digital rights organization rebuilt their public-facing platform to meet WCAG 2.2 AA standards, increasing engagement from assistive technology users by 340%.
Authors: Emily Rodriguez
Call to Action Sections
The callToAction section pairs a heading and short pitch with one or more buttons. Add an image and it becomes a two-column layout. Section titles on the newer sections can use style: highlight for a marker stroke behind the text.
Props: title (heading), description (markdown), buttons[], image, imageAlt, imagePosition (left/right)
Audit Your Data Flows
Our open workbook walks your team through mapping what you collect, where it goes and who can see it — in an afternoon.
Design With, Not For
Community-centred design starts by paying the people whose lives the product will shape. Read how we run co-design sessions with partner organisations.
The miniCta section is a single line and one button — a light nudge between longer sections.
Props: text (markdown), button
Running an encrypted messaging rollout? Our field guide covers the first 90 days.
Testimonials Section
The testimonials section shows quotes. One quote renders as a large pull quote; several form a grid. Each testimonial takes a name and role, or links a person from the People collection to pull in their name, title and photo.
Props: title (heading), description, testimonials[] (quote, name, role, image, person)
What Partners Say
They helped us move our case files off a commercial cloud and onto infrastructure we govern ourselves — without losing a single week of casework.
The consent flows they designed with our members are the first ones people have actually read.
Accessibility wasn't a final audit item — it shaped the product from the first sketch.
Surveillance is not a side effect of technology. It is a design choice — and so is its absence.
Composing Sections
Sections stack in the order they appear in the page's sections array. To build a richer block — say, an introduction followed by a card grid and a call to action — place the section types one after another and give them the same background so they read as one unit.
Digital Rights Toolkit
The tools we build shape the freedoms people can exercise. When technology is designed without regard for human rights, it becomes a mechanism of control rather than empowerment.
Every design decision is a values decision. Choosing end-to-end encryption is choosing privacy. Choosing open protocols is choosing interoperability. Choosing accessible interfaces is choosing inclusion.
Key Principles
Transparency
Users deserve to understand how their data is collected, processed, and shared.
Consent
Meaningful consent requires clear choices, not dark patterns buried in terms of service.
Minimization
Collect only the data you need. Retain it only as long as necessary. Delete it when done.