v1.6.0
    • Get started

      Install the package, load its styles and components, and build your first page.

    • Foundations

      The content guide, CSS utilities, tokens, and the principles behind every pattern.

    • Patterns

      Every pattern with a live example, when to use it, and where it's already in use.

    Page Title

    Create the page title using middle dot separators to create a clear breadcrumb-like hierarchy.

    When to use

    Use this pattern for every page's <title> element across Penn Libraries web applications.

    How to use

    Separate title segments with · (space, middle dot, space) to create a scannable hierarchy from specific to general.

    The format is:

    Page name · Application name · Penn Libraries
    

    For example:

    • My Account · Find · Penn Libraries
    • Collections A to Z · Digital Collections · Penn Libraries
    • About · Colenda Digital Repository · Penn Libraries

    Omit segments that would be redundant. On a home page, the application name alone may suffice:

    Find · Penn Libraries
    

    Why middle dot?

    The middle dot (·, U+00B7) is compact and visually distinct from content characters like hyphens, pipes, or dashes. It provides clear separation without the visual weight of other delimiters, making titles easy to scan in browser tabs.

    Where it's used

    Design System

    Get started Foundations Patterns Release notes · v1.6.0 Design notes