• Skip to main content
  • Skip to local navigation
  • Skip to EBI global navigation menu
  • Skip to expanded EBI global navigation menu (includes all sub-sections)
  • EMBL-EBI
  • Services
  • Research
  • Training
  • About us
  • Search

EBI Pattern library

Reusable patterns for the EBI Visual Framework

  • EBI Pattern library overview
  • All patterns
  • Sample pages
  • Page structure

This content is deprecated

Please visit the updated EBI Style Lab

Basic


Buttons

Button grid
Badges and buttons

Data


Devices

Screen sizes
Browser and device compatibility

Forms

Select box
Forms

Grid

Custom spacing
Grid

Guidelines


Images

Images with captions
Image shortcuts
Images with tinting

Labels

Tags
Labels
Badges and buttons

Layout

Masthead compact
Menu
Screen sizes
Forms
Sample pages
Page structure
Tabs
Intro unit
Custom spacing
Button grid
Images with captions
Image shortcuts
Images with tinting
Grid
Helper classes

Links

Related links box
Button grid
Badges and buttons

Lists

Menu
Lists
Lists - pulse

Navigation

Masthead compact
Menu
Page structure
Tabs
Related links box

Search

Search SEO guidelines
Search guidelines
EBI Search indexing
Search
Meta copy
Live filtering

Tables

Sorting tables
Responsive tables
Data tables
Tables

Typography

Code highlighting
Intro unit
Headlines
Formatting
Pullquotes
Tables
Live filtering
Lists
Lists - pulse
Icons
Helper classes

Usability

Screen sizes
Analytics
Animations
Usability
Browser and device compatibility

Visuals

Animations
Meta copy
Images with captions
Image shortcuts
Images with tinting
Icons
Favicons
Colours (EMBL-EBI)

Visulisation


Writing

Headlines
Formatting
Meta copy

All patterns

  • Buttons 2 patterns
    • Button grid
    • Badges and buttons
  • Devices 2 patterns
    • Screen sizes
    • Browser and device compatibility
  • Forms 2 patterns
    • Select box
    • Forms
  • Grid 2 patterns
    • Custom spacing
    • Grid
  • Images 3 patterns
    • Images with captions
    • Image shortcuts
    • Images with tinting
  • Labels 3 patterns
    • Tags
    • Labels
    • Badges and buttons
  • Layout 15 patterns
    • Masthead compact
    • Menu
    • Screen sizes
    • Forms
    • Sample pages
    • Page structure
    • Tabs
    • Intro unit
    • Custom spacing
    • Button grid
    • Images with captions
    • Image shortcuts
    • Images with tinting
    • Grid
    • Helper classes
  • Links 3 patterns
    • Related links box
    • Button grid
    • Badges and buttons
  • Lists 3 patterns
    • Menu
    • Lists
    • Lists - pulse
  • Navigation 5 patterns
    • Masthead compact
    • Menu
    • Page structure
    • Tabs
    • Related links box
  • Search 6 patterns
    • Search SEO guidelines
    • Search guidelines
    • EBI Search indexing
    • Search
    • Meta copy
    • Live filtering
  • Tables 4 patterns
    • Sorting tables
    • Responsive tables
    • Data tables
    • Tables
  • Typography 11 patterns
    • Code highlighting
    • Intro unit
    • Headlines
    • Formatting
    • Pullquotes
    • Tables
    • Live filtering
    • Lists
    • Lists - pulse
    • Icons
    • Helper classes
  • Usability 5 patterns
    • Screen sizes
    • Analytics
    • Animations
    • Usability
    • Browser and device compatibility
  • Visuals 8 patterns
    • Animations
    • Meta copy
    • Images with captions
    • Image shortcuts
    • Images with tinting
    • Icons
    • Favicons
    • Colours (EMBL-EBI)
  • Writing 3 patterns
    • Headlines
    • Formatting
    • Meta copy

See also

These resources will help you engage and understand the EBI Framework.
  • EBI Visual Framework repository
  • Boilerplate pages
  • Foundation Framework docs
Revise this page's content
The EBI Visual Framework and Pattern library are maintained by Web Development and overseen by the Web Guidelines Committee.