EDS Common Blocks is a comprehensive component library built specifically for Adobe Edge Delivery Services. It provides a collection of pre-built, customizable blocks that help teams build websites faster while maintaining consistency and performance. Testing 1234
Whether you're building a marketing site, product page, or documentation portal, these blocks give you the foundation to create polished experiences without starting from scratch.
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:
The system handles the rest—styling, responsiveness, and accessibility are built in.
Each block is self-contained with its own JavaScript, SCSS, and JSON model. This modular approach means:
Blocks automatically receive design tokens as CSS custom properties, ensuring consistent styling without manual configuration.
The design token system follows a three-tier hierarchy:
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.
Development is straightforward:
For production, "npm run build:prod" optimizes everything:
Deploy through GitHub and Edge Delivery Services handles the rest—global CDN, automatic HTTPS, and instant cache invalidation.
The design token system ensures every component speaks the same visual language. Colors, typography, spacing, and shadows are defined once and applied everywhere.
Tokens are organized into logical groups:
Colors: Brand primary, secondary, neutrals, and semantic colors for states
Typography: A modular scale from caption to display sizes
Spacing: Consistent rhythm from extra-small to extra-large
Effects: Border radii, shadows, and transitions
When you update a token, every component that uses it updates automatically. No find-and-replace, no missed instances.
