DevDoc Block Examples
Overview
This reference site showcases all available blocks that can be used to create engaging developer documentation. Each block is a modular component designed to present specific types of content, from hero banners and code examples to interactive API documentation and media resources.
These blocks provide a consistent, standardized way to structure and display content across Adobe developer documentation sites. Whether you're building tutorials, API references, or product guides, these blocks enable you to create professional, accessible documentation efficiently.
Categories of Blocks
There are two main categories of blocks available:
- Configuration Blocks: Essential navigation and layout configuration blocks including SideNav and TopNav. These blocks define the structure and navigation of your documentation site (set in
config.md). - Content Blocks: All content presentation blocks including heroes, accordions, code blocks, API documentation, tabs, and more. These blocks help you create and organize your documentation content with rich formatting and interactive elements.
Configuration Blocks
Control your site's structure and navigation through config.md.
SideNav
Side navigation menu.
TopNav
Top navigation bar.
Breadcrumbs
Auto-generated navigation trail from your TopNav and SideNav.
Hide Page Actions
Control visibility of Edit in GitHub, Log an issue, and Copy Markdown per page.
Footer
Site footer (centrally managed).
Site-Wide Banner
Announcement banner displayed across all pages.
Credential
Get Credential flow for OAuth or API key.
- OAuth Flow - Server-to-server
- API Key Flow - API Key
Content Blocks
Build and organize your page content.
Accordion
Collapsible sections.
Announcement
Important notices and announcements.
Cards
Content cards in grid layouts.
Wide Variant - Cards with a wide image
Code
Markdown code snippet with syntax.
- Basic - Simple examples
- Highlighted Lines - Line highlighting
- In Lists - Nested in lists
- In Tables - Inline in tables
- Combined Features - Multiple features
CodeBlock
Multiple code block with headings.
- With Language Picker - Switch between languages
- Without Language Picker - Show all at once
Columns
Multi-column layouts.
Details
Expandable/collapsible sections for FAQs and workflows.
Discover Block
Featured content showcase.
Edition
Edition-specific content.
Embed
Integrate videos, social media posts, and other external media.
Fragment
Include reusable content from other markdown files.
Iframe
Embed external content and web pages.
Image
Add and format images.
Inline Alert
Warnings, tips, and notes.
Inline Code
Format inline code with backticks.
Links
Link between pages using relative and absolute paths.
List
Styled lists with icons.
On This Page
Auto-generated table of contents from H2 and H3 headings.
Product Card
Display product information in a card format.
Redocly API Block
Interactive API docs from OpenAPI specs.
Configuration:
Layout:
- Without Layout - Full-page
- Without Sidebar - No sidebar
- Without Sidebar & Search - Minimal
- With Scroll Offset - Fixed headers
Advanced:
- External API - Load from URLs
Resources
Resource links displayed on right sidebar.
Superhero
Hero banners with images and CTAs. 8 variants:
Layouts:
- Default - Standard
- Half Width - Split-screen
- Centered - Center-aligned
- Centered XL - Extra-large
Enhanced:
- Default + Background - Custom background
- Half Width + Background - Full-width background
- Half Width + Video - Video background
Tab
Organize content in tabs.
Table
Structured data in rows and columns.