v1.3.1
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Button
    3. Callout
    4. Chat
    5. Description List
    6. Fallback Image
    7. Feedback
    8. Focus Indicator
    9. Footer
    10. Header
    11. Hero
    12. IIIF Image
    13. Link
    14. Page Title
    15. Results per Page
  1. Home
  2. Patterns

Patterns

Use these proven patterns to meet common design needs.

  • Autocomplete

    Offer search suggestions as you type.

  • Button

    Help people take actions like submitting a form.

  • Callout

    Help people notice important information on a page.

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

  • Link

    Help users navigate from one page or website to another.

  • 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 People Build Digital Spaces v1.3.1