Strapi CMS

Component Library

Visual reference of every Strapi component. Each preview shows the actual rendered look & feel, followed by its schema.

HeroBlock CtaBlock SectionHeader SimpleCard PipelineStep CaseStudyCard ResearchApproachItem UseCaseEntry PatternPanel ResponsibleStep MediaBlock Tag NavItem ArrowLink SocialLink SeoMeta

HeroBlockUsed by: all research pages

Page Title Goes Here

A paragraph describing the page content. This text is stored in the description field and rendered below the hero title.

Field	Type
`title`	string	required
`description`	text	required
`image`	media (images)

CtaBlockUsed as the "Build with SDK" section on all research pages

Build with the Hax SDK

The HAX SDK gives developers everything they need to integrate agents into their apps.

Explore the SDK

Field	Type
`title`	string	required
`description`	text	required
`buttonLabel`	string	required
`buttonUrl`	string	required
`image`	media (images)

SectionHeaderUsed by: ResearchPage

Section Title

An optional subtitle that provides additional context below the section heading.

Field	Type
`title`	string	required
`subtitle`	string

SimpleCardUsed by: SecurityPrivacyPage ("Building Secure Systems" cards)

Enabling Safe Innovation

Our security research ensures that as agents become more capable, they remain trustworthy and aligned with user intentions.

Protecting User Privacy

We investigate privacy-preserving architectures that keep sensitive data secure while enabling powerful agent capabilities.

Field	Type
`title`	string	required
`description`	text	required

PipelineStepUsed by: FoundationalPrinciplesPage

Step Title

An optional italic subtitle

A description paragraph explaining the purpose and methodology of this pipeline step.

A notable quote or key insight displayed in a bordered box.

First bullet point
Second bullet point

Deliverables

Deliverable item

Field	Type
`stepNumber`	string	required
`title`	string	required
`subtitle`	string
`description`	text
`quote`	text
`bullets`	text
`deliverables`	text

CaseStudyCardUsed by: FoundationalPrinciplesPage

Case Study

Smart Home Energy Management

IoTSustainability

An AI-powered home energy system that learns usage patterns and automatically optimizes consumption while maintaining comfort levels.

Problem

Homeowners struggle to reduce energy costs without sacrificing comfort or convenience.

Applied Principles

TransparencyUser Control

Field	Type
`title`	string	required
`description`	text	required
`problem`	text
`tags`	Tag[] (component)
`principles`	text

ResearchApproachItemUsed by: SecurityPrivacyPage (alternating image/text rows)

Adaptive Security Policies

How agents dynamically adjust their security posture based on context, risk assessment, and user behavior patterns.

Dynamic policy adjustment
Context-aware guardrails
Real-time monitoring

Field	Type
`title`	string	required
`description`	text	required
`exploreBullets`	text (newline-separated)	required
`image`	media (images)
`imageAlt`	string

UseCaseEntryUsed by: SecurityPrivacyPage (rendered as blog-card style)

Healthcare Data Agent

An agent that processes patient data while maintaining HIPAA compliance and data minimization principles.

PrivacyHealthcare

Financial Advisory Agent

An autonomous agent providing personalized financial advice while ensuring transparency in its reasoning.

TrustFinance

Field	Type
`title`	string	required
`description`	text	required
`tags`	Tag[] (component)

PatternPanelUsed by: HaxPage (interaction pattern tabs)

Delegation

How users hand off tasks to agents and maintain appropriate levels of control and oversight.

Examples

Example image 1

Example image 2

Field	Type
`key`	string (filter button id)	required
`title`	string	required
`description`	text	required
`exampleImages`	media[] (multiple)

ResponsibleStepUsed by: SocietalImpactPage (framework steps)

Image

Step 1

Stakeholder Mapping

Identify all affected parties
Map power dynamics and dependencies
Assess vulnerability of each group

Template:Agent Impact Map →

Field	Type
`label`	string	required
`title`	string	required
`image`	media (images)
`imageAlt`	string
`bullets`	text (newline-separated)	required
`templateLabel`	string
`templateLink`	string

MediaBlockUsed by: ResearchCard, Initiative

Image type

Caption text appears here

Video type

Video loaded via URL

Field	Type
`mediaType`	enum (image \| video)	required
`image`	media (images)
`videoUrl`	string
`altText`	string	required
`caption`	string

TagUsed by: CaseStudyCard, UseCaseEntry, BlogPost, ResearchCard

Default TagCategory TagResearch TagBlog Tag

Field	Type
`label`	string	required
`url`	string
`color`	enum (cyan \| violet \| green \| orange \| default)

NavItemUsed by: Homepage (navigation)

Initiatives

Research

Blog

Field	Type
`label`	string	required
`href`	string	required
`hasDropdown`	boolean
`order`	integer

ArrowLinkUsed by: Homepage, ResearchCard, HaxPage

Explore →Rendered as arrow button or text link depending on context

Field	Type
`label`	string	required
`url`	string	required
`isExternal`	boolean

Field	Type
`platform`	enum (x \| linkedin \| youtube \| github \| dribbble)	required
`url`	string	required
`ariaLabel`	string	required

SeoMetaUsed by: all content types (no visual output — populates <head>)

<head>
  <title>Page Title (max 60 chars)</title>
  <meta name="description" content="Description (max 160 chars)">
  <meta property="og:image" content="image-url">
  <link rel="canonical" href="canonical-url">
</head>

Field	Type
`metaTitle`	string (max 60)	required
`metaDescription`	text (max 160)
`ogImage`	media (images)
`canonicalUrl`	string