Package Exports

callout-alert
callout-alert/callout-alert.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (callout-alert) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

callout-alert

A Github / Obsidian inspired web component for displaying a callout in your page.

Several colored banners, each with an icon, title, and text.

How to use

<script src="https://unpkg.com/callout-alert@1"></script>

<callout-alert type="tip">
  Optional information to help a user be more successful.
</callout-alert>

Types of Alerts

The following types are available by default:

type	color	icon	title
`note`	blue	info circle	Note
`tip`	green	lightbulb	Tip
`important`	purple	report comment	Important
`warning`	yellow	warning triangle	Warning
`caution`	red	report octogon	Caution
Default	grey	document icon	Note

You can also configure the Color, Icon, and Title using CSS variables or slots.

CSS API

The following CSS variables can be used to control the presentation of the component:

--callout-color: Used to set the color of the component. Currently must be a set of 3 numbers, the red, green, and blue value.
--callout-icon: Icon to use, you can use any value from Google's Icon Font.
--callout-title: Title for the callout. Can be any string.

You can set some or all of these for a specific callout-alert instance, or at a page level.

<style>
  callout-alert {
    --callout-color: 0, 200, 225;
    --callout-icon: 'bolt';
    --callout-title: 'Alert';
  }
</style>

<callout-alert> Watch out for lighting bolts! </callout-alert>

Slot API

You can use the following slot names to change the icon or title of the callout.

icon: Can be used to override the icon.
title: Can be used to override the title.

You can set some or all of these inside a callout-alert instance.

<callout-alert type="tip">
  <span slot="icon">📦</span>
  <span slot="title">Slots</span>
  This is a custom alert, that uses slots to set the icon and title.
</callout-alert>

Known Limitations

Below are a list of known limitations. While there may be available solutions here, an effort has been made to make the code as straight-forward as possible.

Colors

Until relative CSS colors are universally supported, the colors are defined as three numbers. Ideally, once relative colors are supported, we would allow any CSS color (this will be marked as a breaking change, if introduced).

Icon Library

By default, this component loads Google's Material Icon font in the owner document using javascript. Sadly, it's currently not possible to load font-families from a web component context, or from a stylesheet in a component.