# cf-components-alert

> "An alert web component"

Latest version **1.0.4** (published 2019-10-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install cf-components-alert
pnpm add cf-components-alert
yarn add cf-components-alert
bun add cf-components-alert
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-10-06 |
| First published | 2019-06-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Carrie Forde |
| Maintainers | carrieforde |

## Links

- npm: https://www.npmjs.com/package/cf-components-alert
- Repository: https://github.com/carrieforde/cf-component-alert
- Homepage: https://github.com/carrieforde/cf-component-alert#readme
- Issues: https://github.com/carrieforde/cf-component-alert/issues
- npm.io page: https://npm.io/package/cf-components-alert

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0

## Recent versions

- 1.0.4 (latest) — 2019-10-06
- 1.0.3 — 2019-10-06
- 1.0.2 — 2019-10-06
- 1.0.1 — 2019-06-09
- 1.0.0 — 2019-06-09

## README

# cf-alert

A simple alert web component.

## Usage

In an HTML file:

```html
<!DOCTYPE html><html lang="en"><head>
    <script type="module" src="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 a tip / success alert.
    </cf-alert>

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

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

With npm:

```
npm install cf-alert
```

```js
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:

```css
/* 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;
```

---
_Source: https://npm.io/package/cf-components-alert · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._