Skip to main content
Our new developer certification is live!

Organisms

Organisms are complex UI components composed of molecules and atoms. They form distinct sections of the interface with specific purposes and internal complexity.

What are Organisms?

Organisms are:

  • Complex components: Built from molecules, atoms, and sometimes other organisms
  • Distinct sections: Represent self-contained UI sections (headers, footers, card lists, etc.)
  • Purpose-driven: Serve specific functional purposes
  • Composable: Can be combined to create page templates

Examples

  • A header (logo molecule + navigation molecule + search molecule)
  • A product card (image atom + title atom + price atom + button molecule)
  • A form (multiple form field molecules + submit button molecule)
  • A footer (multiple link groups + social icons + copyright)

Components

  • AdditionalItemsSection - FAQ and Related Items from additional_items (FAQ, List)
  • AnnouncementBar - Top announcement bar (Links)
  • ContentActions - Copy for LLM, View as Markdown (Icons atoms)
  • DefaultCard - Content card with image, title, tags (MediaItem, Title, TaxonomyTags)
  • Footer - Site footer (FooterAccordion, Icons, Button)
  • FooterClient - Client-side footer with accordions (FooterAccordion)
  • Header - Site header (AnnouncementBar, MainNavigation)
  • Hero - Hero section (Title, RichTextRenderer, SearchBar, Cta)
  • IconCard - Icon-focused card (MediaItem, Title atoms)
  • List - Grid of cards (Title, RichTextRenderer, DefaultCard/IconCard)
  • MainNavigation - Navigation wrapper (DesktopNavigation, MobileNavigation)
  • Media - Media display (MediaItem atom)
  • Persons - List of person cards (AuthorCard molecules)
  • RichText - Rich text section (Title, RichTextRenderer atoms)
  • TechnologyList - Kickstart icon grid for Hero (MediaItem, Title atoms)
  • TwoColumn - Two-column layout (ComponentsRenderer per side)

Design Principles

  • Composition: Organisms can use molecules, atoms, and other organisms
  • Self-contained: Each organism represents a complete UI section
  • Reusable: Can be used across different pages and contexts
  • Complexity: Handle more complex interactions and state management

When to Create an Organism

Create an organism when:

  • You're combining multiple molecules and atoms into a distinct section
  • The component represents a major UI section (header, footer, card list, etc.)
  • It has internal complexity and multiple responsibilities
  • It will be reused as a complete unit across pages

Relationship to Molecules and Atoms

Organisms are built from:

  • Molecules: Like AuthorCard, SearchBar, TaxonomyTags
  • Atoms: Like Button, Icons, MediaItem, Title
  • Other organisms: Like Header using AnnouncementBar and MainNavigation

Examples of Composition

  • Header = AnnouncementBar organism + MainNavigation organism
  • DefaultCard = MediaItem atom + Title atom + Icons atom + TaxonomyTags molecule
  • Hero = Title atom + RichTextRenderer atom + SearchBar molecule + Cta molecule
  • TwoColumn = Title atom + two ComponentsRenderer instances (one per side)