wavy hr

An hr tag with style. Be sure to copy the file ./dist/wave.svg into the root public folder on your web server. The CSS depends on that file.

See a live demo

• install
• API
  • ESM
  • Common JS
• CSS
  • Import CSS
• use
  • JS
  • HTML
  • pre-built JS

install

npm i -S @substrate-system/wavy-hr

API

ESM and common JS via package.json exports field.

ESM

import '@substrate-system/wavy-hr'

Common JS

require('@substrate-system/wavy-hr')

CSS

Import CSS

import '@substrate-system/wavy-hr/css'

Or minified:

import '@substrate-system/wavy-hr/css/min'

use

This calls the global function customElements.define. Just import, then use the tag in your HTML.

JS

import '@substrate-system/wavy-hr'

HTML

<div>
    <wavy-hr></wavy-hr>
</div>

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/wavy-hr/dist/index.min.js ./public/wavy-hr.min.js

HTML

<script type="module" src="./wavy-hr.min.js"></script>