RHEA fits seamlessly into the Edge Delivery Services workflow. Here's what you need to know.
home-router-new-site
Start a new site
You're building something new with RHEA. Get the 6-step setup guide, boilerplate, and a checklist for your first launch.
true
card-gap-default
true
router:new-site, position:1
home-router-migrate
Migrate an existing site
Moving from AEM Sites, WordPress, or another platform onto RHEA. Assess your site's tier, estimate effort, follow the migration playbook.
true
card-gap-default
true
router:migrate, position:2
home-router-blocks
Browse the block library
27 production-ready blocks, each with live examples, authoring guidance, and developer docs. Filter by category, copy what you need.
true
card-gap-default
true
router:blocks, position:3
home-router-support
Get support
Request a new block, book an architecture review, report an issue, or talk to the team. We're here to unblock you.
true
true
card-gap-default
true
router:support, position:4
Why teams pick RHEA
A shared foundation means your site launches faster, stays accessible, and passes performance budgets on day one.
Performance by default
Every block is built to hit Lighthouse score of 100. RHEA inherits EDS's edge-rendered architecture - no framework tax, no jank, no excuses.
One system, every brand
Design tokens, shared blocks, and a reference site keep every AbbVie property on the same foundation. Brand customization happens at the token layer, not by forking blocks.
Launch in weeks, not quarters
Teams using RHEA go from kickoff to production in 6-10 weeks on average. The boilerplate, block library, and architecture review process do the heavy lifting.
How It Works
Content Authoring
Authors create content in familiar tools like Google Docs or Microsoft Word. No special software needed. Content syncs automatically to AEM, where blocks are rendered based on simple table structures.
Each block is defined by a table in your document. The first row contains the block name, and subsequent rows contain the content. It's that simple.
For example, a CTA block might look like:
- Row 1: "CTA"
- Row 2: "Get Started"
- Row 3: "/getting-started"
The system handles the rest—styling, responsiveness, and accessibility are built in.
Block Architecture
Each block is self-contained with its own JavaScript, SCSS, and JSON model. This modular approach means:
- Easy maintenance: Update one block without affecting others
- Clear ownership: Each block has defined inputs and outputs
- Simple debugging: Issues are isolated to specific components
Blocks automatically receive design tokens as CSS custom properties, ensuring consistent styling without manual configuration.
Design Token System
The design token system follows a three-tier hierarchy:
- Common Tokens: Raw values like colors (#492728), spacing (16px), and typography (Roboto)
- Semantic Tokens: Contextual meanings like "primary-text-color" or "default-spacing" that reference common tokens
- Block Tokens: Component-specific overrides that reference semantic tokens
This hierarchy ensures that changing a brand color in one place updates it everywhere. Light and dark themes are built in—just add a data-theme="dark" attribute to any container.
Build & Deploy
Development is straightforward:
- Run "npm start" to launch the dev server with hot reload
- SCSS compiles automatically when you save
- Token changes trigger a full rebuild to keep everything in sync
For production, "npm run build:prod" optimizes everything:
- CSS is minified and autoprefixed
- Unused styles are removed
- Assets are optimized for delivery
Deploy through GitHub and Edge Delivery Services handles the rest—global CDN, automatic HTTPS, and instant cache invalidation.
true
true
u-cta-primary-outlined
icon-anim-crossfade
Featured Blocks
Start with the essentials. Five foundation blocks cover 80% of what most pages need. Start here, then explore the full catalog.
home-featured-card
Card
Flexible content containers for lists, grids, and clickable teasers. Icon or image, title, body, up to two CTAs.
true
card-gap-default
home-featured-cta
CTA
The standard call-to-action primitive. Five visual variants, icon support, a11y built in.
true
card-gap-default
home-featured-teaser
Teaser
Full-bleed hero-style blocks with image/video backgrounds, headline, description, and dual CTAs.
true
card-gap-default
home-featured-text
Text
Richtext content with alignment, size, and color variants. The workhorse block.
true
card-gap-default
See all 27 blocks
cta, u-cta-primary-filled, u-cta-large-padding, u-cta-default-text-size, u-cta-default-icon-size, u-cta-default-icon-spacing, u-cta-icon-right, u-br-default, rhea-block-cta
