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
Privacy is a Human Right
Building technology that respects the people who use it.
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?"
Gradient Background
Rich text sections can use a gradient background by setting bgColor: gradient. This creates a subtle blue-to-indigo 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.
Button Sections
The button section displays a row of call-to-action buttons. Each button has a variant (primary, secondary, outline, ghost) and a size (sm, md, lg).
Props: title, buttons[] with variant, size, href, text
All Four Variants (medium)
All Three Sizes (primary)
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
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.
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
Flexi Section
The flexi section is a container that wraps other section types, allowing you to compose multiple sections under a shared title and description. Any non-flexi section type can be nested inside.
Props: title (required), description, sections[] (array of section objects)
Digital Rights Toolkit
A composed section demonstrating nested content — rich text, cards, and buttons living together.
Why Digital Rights Matter
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.