Jekyll Theme Primer Spec

Callouts

Use Callouts when you want to elevate information and draw attention to it. Use these components sparingly!

All of these callouts work great in dark mode too!

You can include code blocks in your callouts too!

int main() {
  std::cout << "Primer Spec!" << std::endl;
  return 0;
}

Usage

<div class="primer-spec-callout [variant]" markdown="1">
  This is an example note box.
  If you use this in a `markdown` file, *markdown* works inside the box too!
</div>

Primer Spec offers five variants of callouts:

neutral
info
warning
danger
sucess

See below for examples of each of these callouts.

`neutral`

Pro tip: Use this to create a simple note box. It’s weaker than info, but offers stronger emphasis than main body text.

neutral source

<div class="primer-spec-callout" markdown="1">
  **Pro tip:** Use this to create a simple note box. It's weaker than `info`, but offers stronger emphasis than main body text.
</div>

`info`

Pro tip: Use this for additional information, context or hints.

info source

<div class="primer-spec-callout info" markdown="1">
  **Pro tip:** Use this for additional information, context or hints.
</div>

`warning`

Pro tip: Use this to alert readers or when extra care/attention is needed.

warning source

<div class="primer-spec-callout warning" markdown="1">
  **Pro tip:** Use this to alert readers or when extra care/attention is needed.
</div>

`danger`

Pro tip: Use this to caution readers about dangerous outcomes (or when something won’t work as expected).

danger source

<div class="primer-spec-callout danger" markdown="1">
  **Pro tip:** Use this to caution readers about dangerous outcomes (or when something won't work as expected).
</div>

`success`

Pro tip: Use this to celebrate an achievement!

success source

<div class="primer-spec-callout success" markdown="1">
  **Pro tip:** Use this to celebrate an achievement!
</div>