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

Patterns

Use these proven patterns to meet common design needs.

  • Autocomplete

    Offer search suggestions as you type.

  • Chat

    Provide users with instant access to live help.

  • Description list

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

  • Fallback image

    Maintain visual consistency in layouts when some content lacks images.

  • Feedback

    Ask visitors if they found what they need and invite them to share feedback.

  • 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.

  • Page title

    Format browser tab titles consistently across applications.

  • Results per page

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

Design System

About Writing for users Build digital spaces v1.2.0