Every pattern with a live example, when to use it, and where it's already in use.
Group collapsible sections behind headings people can open and close, one or several at a time.
Offer predictive suggestions while typing your search query.
Buttons are for actions. People expect buttons to do an action and links to navigate to another page.
Callouts highlight key details so people don't miss them.
Cards preview a grouping of content so someone can decide where to go next.
Integrate live chat support that assists users as they explore your website.
List groups of terms and descriptions.
Collapse a section of content under a heading.
Limit long text to a number of lines while offering a toggle button to reveal all the content.
Fallback image maintains consistent spacing and alignment when content without an image appears alongside siblings that typically have images.
A feedback component that asks a yes/no question and links to a feedback form.
Create clear focus styles that guide users through your interface.
Use the footer to guide users who reach the bottom of the page without finding what they want.
Use the header to identify our websites and carry the main navigation.
Place your most important content in a prominent space, often at the top of your website.
Display high-quality images from our IIIF server that automatically adapt.
Style links so users can easily identify and interact with them.
Create the page title using middle dot separators to create a clear breadcrumb-like hierarchy.
Set a fixed number of results per page, with optional controls only when essential.
Use the service switcher to move between Penn Libraries' main places to start.