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

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. Writing for people 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

About Writing for People Build Digital Spaces v1.3.1