Rocket Logo Rocket Docs Themes Tools Blog

Inline Notification

Components ships with <inline-notification>, a custom element that applies some styles similar to "info boxes".

To add all components to the rocket loader add this to site/pages/

import { rocketComponents } from '@rocket/components/components.js';

export const components = {

Then you can add your notification to the page. If you want to write the notification's content using markdown, pad the opening and closing tags with empty lines.

There are three varieties of <inline-notification>, "tip", "warning", and "danger"

Take a tip from me

<inline-notification type="tip">

Take a tip from me


Be sure about this...

<inline-notification type="warning">

Be _sure_ about this...


You really shouldn't!

<inline-notification type="danger">

You **really** shouldn't!


Modify the Title

The notification title defaults to it's type. You can write a custom title with the title attribute.

I am a success message

<inline-notification type="tip" title="success">

I am a success message


The title attribute does not change the title for <noscript> users, so don't include any critical information in it.