Note / Alert

The Note component can be used to provide information or messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add note

Basic

View

Code

Change a few things up and try submitting again.

Variants

View

Code

Default alert! Change a few things up and try submitting again.

Danger alert! Change a few things up and try submitting again.

Outline alert! Change a few things up and try submitting again.

Title & Description

View

Code

Heads up!

Change a few things up and try submitting again.

Heads up!

Change a few things up and try submitting again.

Heads up!

Change a few things up and try submitting again.

With Icon

View

Code

Heads up!

Change a few things up and try submitting again.