v1.4.0
  1. Home
  2. Get started
  3. Foundations
  4. Patterns
    1. Accordion
    2. Autocomplete
    3. Button
    4. Callout
    5. Chat
    6. Description List
    7. Details
    8. Expand Text
    9. Fallback Image
    10. Feedback
    11. Focus Indicator
    12. Footer
    13. Header
    14. Hero
    15. IIIF Image
    16. Link
    17. Page Title
    18. Results per Page
    19. Service Switcher
  5. What's new

Callout

Callouts highlight key details so people don't miss them.

Help people notice important information on a page.

When to use

Use a callout when people need to notice something, like a tip, a requirement, or a key detail.

Content order comes first

Use a callout when content organization alone isn't enough. Where something sits on the page already signals its importance. Content covers how to organize and order content so the most important information comes first.

How to use

Keep callouts short. One or two sentences works best. If you need more space, the information probably belongs in the main content.

<div class="pl-typeset pl-reset pl-margin-l">
  <p class="pl-callout">
    <strong>Guide</strong>: <a href="https://www.library.upenn.edu/services/books-mail">Set your address with Books by Mail</a>
  </p>
</div>

Design System

Get started Content & writing v1.4.0