v3.12 next
Powered by

# Callout

Callout components help to highlight important messages for the reader.

To create an Callout, just surround a block of text or any markdown content with !!!.

!!!
This is an Callout.
!!!

# Title

Callouts can also have titles. Add a space, then add your title, such as !!! My title.

!!! My title
This is an Callout.
!!!

Some basic Markdown syntax and emoji :shortcodes: are supported in the titles.

!!! :zap: [Getting Started](/guides/getting-started.md) :zap:
Get up to speed with Retype quickly by checking out the Getting Started guide.
!!!

# Variant

Callouts come in nine different flavors which can be specified by passing a variant immediately after the !!!, such as !!!danger.

Variant Color
base Uses base-color
primary (default) blue
secondary gray
success green
tip green
danger red
warning yellow
info light-blue
question purple
light light
dark dark
ghost light or dark depending on time of day
contrast dark or light depending on time of day

# Samples 

!!!base Base
This is a `base` Callout.
!!!

!!!primary Primary
This is a `primary` Callout.
!!!

!!!secondary Secondary
This is a `secondary` Callout.
!!!

!!!success Success
This is a `success` Callout.
!!!

!!!tip Tip
This is a `tip` Callout.
!!!

!!!danger Danger
This is a `danger` Callout.
!!!

!!!warning Warning
This is a `warning` Callout.
!!!

!!!info Info
This is a `info` Callout.
!!!

!!!question Question
This is a `question` Callout.
!!!

!!!light Light
This is a `light` Callout.
!!!

!!!dark Dark
This is a `dark` Callout.
!!!

!!!ghost Ghost
This is a `ghost` Callout.
!!!

!!!contrast Contrast
This is a `contrast` Callout.
!!!

# GitHub Alerts

In addition to the Retype Callout component syntax options above, Retype also supports fully the GitHub Alert extension which is an adaptation of the Markdown blockquote syntax.

> [!NOTE]
> Useful information that users should know.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Here are the rendered GitHub Alerts:

# Custom title

Retype also supports setting a custom title value on the GitHub Alerts using the following syntax:

> [!NOTE] Custom Title
> Useful information that users should know.

# Theme variables

Retype gives you full control over the look and feel of your callout components through customizable theme variables.

You can override any of theme variable in your retype.yml configuration file using the theme.base and theme.dark settings.

For example, to change the primary callout color for all instances of the primary callout within your project, add the following to your project's retype.yml file:

theme:
  base:
    # Revise the primary variant base color
    # across all components within the project
    # primary: "#209fb5" 

    # Or, adjust callout only theme variables
    callout-primary: "#209fb5"

To learn more about theme variables and how they work across Retype, check out the Themes Guide, the Theme Variables documentation, and theme Project settings.