image
/content/dam/eds-common-blocks/ai-generated/ai-generated-hero-2.png

Block Party 🎉

A comprehensive catalog of all available blocks in the EDS Common Blocks project
inline-text-overlay
16
10
9
16

Section Decorators

Layout containers that organize and structure page content. These are the building blocks for page layout and responsive design.
card-container
eds-common-blocks:block-type/section

Container

The primary section wrapper that controls content width, background colors, spacing, and alignment. Supports multiple width options and can hold any combination of blocks.
true
card-gap-default
/content/rhea/blocks/container
card-column
eds-common-blocks:block-type/section,eds-common-blocks:block-type/responsive

Column

Flexible grid column for creating multi-column layouts. Supports responsive widths (25%-100%) for desktop, tablet, and mobile. Includes row settings for parent container configuration.
true
false
card-gap-default
/content/rhea/blocks/column
card-modal
eds-common-blocks:block-type/section
Overlay dialog container for popups, lightboxes, and modal content. Features customizable size, animations (fade/slide), close button, and optional page-load trigger with delay.
true
card-gap-default
/content/rhea/blocks/modal
card-modal
eds-common-blocks:block-type/section,eds-common-blocks:block-type/has-tokens

Accordion

Specialized section that exclusively contains Accordion Item blocks. Creates expandable/collapsible FAQ-style content with smooth animations and keyboard navigation support.
true
card-gap-default
/content/rhea/blocks/accordion
card-modal
eds-common-blocks:block-type/section
Specialized section that exclusively contains Carousel Slide blocks. Creates an interactive slideshow with navigation controls, progress indicators, and touch/swipe support for showcasing multiple content panels.
true
card-gap-default
/content/rhea/blocks/carousel
card-tabs
eds-common-blocks:block-type/section

Tabs

Specialized section that exclusively contains Tab Panel blocks. Creates an interactive tab-seperated content.
true
card-gap-default
/content/rhea/blocks/tab

Blocks

Reusable content components for building pages. Each block is self-contained with its own styling, behavior, and authoring interface.
card-accordion-item
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens
/content/dam/eds-common-blocks/AbbVie%20Brand%20Portal%20Icons/Plus%202%20icon.svg

Accordion Item

Expandable/collapsible content panel for FAQs and organized content. Features smooth animation, keyboard accessibility, and customizable expand/collapse icons.
true
card-gap-default
/content/rhea/blocks/accordion
card-card
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens
/content/dam/eds-common-blocks/AbbVie%20Brand%20Portal%20Icons/Document%201%20icon.svg

Card

Versatile content card with image, title, description, and optional CTA. Supports multiple layout variants and is commonly used in grid layouts for showcasing products, articles, or features.
true
card-gap-default
/content/rhea/blocks/card
card-carousel-slide
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens
/content/dam/eds-common-blocks/AbbVie%20Brand%20Portal%20Icons/Presentation%20icon.svg
Individual slide component for carousel/slider implementations. Contains slide content with support for images, text, and CTAs within a carousel context.
true
card-gap-default
/content/rhea/blocks/carousel
card-cta
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens
/content/dam/eds-common-blocks/AbbVie%20Brand%20Portal%20Icons/Play%20button%20icon.svg

CTA Group & CTA

Call-to-action button component with multiple style variants (primary, secondary, outline). Supports link configuration, analytics tracking, and icon placement.
true
card-gap-default
/content/rhea/blocks/cta-group-cta
card-divider
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens

Divider

Visual separator line for breaking up content sections. Configurable thickness, color variants (primary, secondary, inverse), and width options.
true
card-gap-default
/content/rhea/blocks/divider
card-image
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens,eds-common-blocks:block-type/lazy-loading

Image

Responsive image component with alt text support. Handles image optimization and lazy loading automatically through the EDS image pipeline.
true
card-gap-default
/content/rhea/blocks/image
card-tab-panel
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens

Tab Panel

Tab Panel block placeholder
true
card-gap-default
/content/rhea/blocks/tab
card-teaser
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens

Teaser

Hero-style banner with background image/video support. Features configurable text alignment, vertical positioning, height variants, overlay options, and CTA buttons. Perfect for page headers and promotional sections.
true
card-gap-default
/content/rhea/blocks/teaser
card-text
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens

Text

Rich text block for body content, paragraphs, and formatted text. Supports multiple behavior modes and integrates with the rich text editor for flexible content authoring.
true
card-gap-default
/content/rhea/blocks/text
card-title
eds-common-blocks:block-type/block,eds-common-blocks:block-type/has-tokens

Title

Heading component with semantic HTML support (h1-h6). Includes text alignment options and consistent typography styling across the site.
true
card-gap-default
/content/rhea/blocks/title

Speciality Blocks

Global components that appear on every page or serve specialized purposes. These blocks are typically configured once and shared across the entire site.
card-header
eds-common-blocks:block-type/block,eds-common-blocks:block-type/fragment-nav
Site-wide navigation header configured in the /nav fragment. Features primary/secondary logos, responsive navigation menu, search toggle, pre-header bar, theme switcher, and extensive styling options.
true
card-gap-default
/content/rhea/blocks/header
card-footer
eds-common-blocks:block-type/block,eds-common-blocks:block-type/fragment-footer
Site-wide footer configured in the /footer fragment. Supports multiple column layouts, navigation links, social icons, copyright text, and legal links.
true
card-gap-default
/content/rhea/blocks/footer
card-isi
eds-common-blocks:block-type/block,eds-common-blocks:block-type/fragment-isi-isi-default

ISI

Important Safety Information block for pharmaceutical/medical compliance. Features sticky behavior, expandable sections, scroll tracking, and required regulatory styling for drug safety information.
true
card-gap-default
/content/rhea/blocks/isi
card-search
eds-common-blocks:block-type/block
Site search interface component with input field and search button. Integrates with search functionality and provides results display.
true
card-gap-default
/content/rhea/blocks/search