Patterns

Use these proven patterns to meet common design needs.

Accordion

Group collapsible content sections.
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.
Details

Collapse a section of content under a heading.
Expand Text

Trim long text while allowing it to expand.
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.
Service Switcher

Help people move between Penn Libraries' places to start.

Design System