<!DOCTYPE html>
<html lang="en">
<head>
    <script type="module" src="components/alert/cf-alert.js"></script>

    <!-- 
        Use CSS custom properties to alter styles within the component.
    -->
    <style>
        --alert-bg-default: hotpink;
    </style>
</head>
<body>
    <cf-alert>
        This is the default alert.
    </cf-alert>

    <cf-alert type="info">
        This is an info alert.
    </cf-alert>

    <cf-alert type="tip">
        This is an tip / success alert.
    </cf-alert>

    <cf-alert type="warning">
        This is an warning alert.
    </cf-alert>

    <cf-alert type="danger">
        This is an danger alert.
    </cf-alert>
</body>
</html>

With npm:

npm install cf-alert

import 'cf-alert';

Configurable styles

Each type of alert can be customized by changing the background color or the text color. Use the following custom properties for customization:

/* Default */
--alert-bg-default: #f0f4f8; /* background-color */
--alert-color-default: #334e68; /* text color */

/* Info */
--alert-bg-info: #e3f8ff;
--alert-color-info: #035388;

/* Tip / Success */
--alert-bg-tip: #effcf6;
--alert-color-tip: #014d40;

/* Warning */
--alert-bg-warning: #fffbea;
--alert-color-warning: #8d2b0b;

/* Danger */
--alert-bg-danger: #ffe3e3;
--alert-color-danger: #610316;

FAQs

What is cf-components-alert?

Is cf-components-alert well maintained?

Package last updated on 06 Oct 2019

cf-components-alert

cf-alert

Usage

Configurable styles

Related posts

Malicious Twitch Browser Extension Exposes 30,000 Users’ OAuth Tokens to Russian Bot Service

Anthropic Identifies Biased Reasoning and Recklessness as Drivers of Claude’s PyPI Attack