Skip to content
JSON Resume Styleguide
GitHub

Feedback

Callout

A highlighted note inside content: tips, changes, warnings and errors.

import { Callout } from '@jsonresume/ui'Source(opens in a new tab)

Playground

Change the props and copy the result.

Deprecated field

Use summary instead of description.
jsx
<Callout tone="warning" title="Deprecated field">Use summary instead of description.</Callout>

Examples

Tones

Tip

Name your gist resume.json and the registry finds it automatically.

New in schema 1.7

Publications can list authors, volume, issue, pages and a DOI.
Your resume is valid.

Deprecated field

projects[].description still works, but use summary.

Validation failed

basics.email must be a string.
callout/tones.tsx
import { Callout, Code, Stack } from '@jsonresume/ui';

export default function CalloutTones() {
  return (
    <Stack gap={3}>
      <Callout title="Tip">
        Name your gist <Code>resume.json</Code> and the registry finds it
        automatically.
      </Callout>
      <Callout tone="brand" title="New in schema 1.7">
        Publications can list authors, volume, issue, pages and a DOI.
      </Callout>
      <Callout tone="success">Your resume is valid.</Callout>
      <Callout tone="warning" title="Deprecated field">
        <Code>projects[].description</Code> still works, but use{' '}
        <Code>summary</Code>.
      </Callout>
      <Callout tone="danger" title="Validation failed">
        <Code>basics.email</Code> must be a string.
      </Callout>
    </Stack>
  );
}

Usage

Do

  • Lead with the most important words.
  • Use brand for announcements.

Don’t

  • Use more than one or two per page.
  • Rely on the color alone: say what happened.

Accessibility

  • Static callouts are plain content. For messages that appear after an action, wrap them in a live region.

Props

<Callout>

Also accepts the attributes of the element Callout renders.
PropTypeDefaultDescription
iconReactNode–Replace the default icon, or pass null to hide it.
titleReactNode–
tonebrandinfowarningnotesuccessdangernote