Neko

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.
!!!

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.
!!!
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 Neko quickly by checking out the Getting Started guide.
!!!
:zap: [Getting Started](/guides/getting-started.md) :zap:

Get up to speed with Neko 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.
!!!
base Base

This is a base Callout.

Primary

This is a primary Callout.

Secondary

This is a secondary Callout.

Success

This is a success Callout.

Tip

This is a tip Callout.

Danger

This is a danger Callout.

Warning

This is a warning Callout.

Info

This is a info Callout.

Question

This is a question Callout.

Light

This is a light Callout.

Dark

This is a dark Callout.

Ghost

This is a ghost Callout.

Contrast

This is a contrast Callout.

GitHub Alerts

In addition to the Neko Callout component syntax options above, Neko 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:

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.

Custom title

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

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

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

Theme variables

Neko 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 neko.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 neko.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 Neko, check out the Themes Guide, the [Theme Variables] documentation, and theme Project settings.

All callout theme variables can be customized in this way. The full list of available variables is shown below, and you can always refer to the Callout Component theme variables for the latest options.

Referenced by