Page Layouts

Common page structures built with the EBRAINS grid system, utility classes, and layout components.

Hero Section

A full-width hero with heading, description, call-to-action, and optional background:

Key classes: bg-strongest for dark background, f-heading-01 for large responsive heading, container mx-auto for centered content.

Content Page

Standard documentation or article layout with a sidebar and main content area:

Dashboard

Grid-based layout with stat cards, charts, and data tables:

Feature Grid

Showcase features or capabilities using card components:

Responsive Behavior

All layouts adapt automatically using the EBRAINS breakpoint system:

Use responsive prefixes to adjust:

Best Practices

• Use container mx-auto for centered, max-width content
• Use grid-layout for column-based layouts
• Keep hero sections concise — one heading, one description, one or two CTAs
• Use eds-card-stat for dashboards, eds-card-feature for feature grids
• Always include eds-header and eds-footer for full pages
• Test layouts at all breakpoints