v1.1.0
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Description list
    3. Chat
    4. Fallback image
    5. Focus indicator
    6. Footer
    7. Header
    8. Hero
    9. IIIF Image
    10. Results per page
  1. Home
  2. Patterns

Patterns

Use these proven patterns to meet common design needs.

  • Autocomplete

    Offer search suggestions as you type.

  • Description list

    List groups of terms and descriptions, such as displaying metadata.

  • Chat

    Provide users with instant access to live help.

  • Fallback image

    Maintain visual consistency in layouts when some content lacks images.

  • Focus indicator

    Help users identify interactive elements.

  • Footer

    Help users find what they need at the bottom of your page.

  • Header

    Show users they're on a Penn Libraries website.

  • Hero

    Draw attention to your main content.

  • IIIF Image

    Display an image from Digital Collections.

  • Results per page

    Display a manageable number of items per page without overwhelming users.

Design System

About Writing for users Build digital spaces v1.1.0