webcomponent-simple-info-addons | Vaadin

Web components to show simple messages.

Built With Stencil

WebComponent SimpleInfoAddons

Simple web components to show information in a simple and beautiful way.

Content table

Use and installation

To use these web components, you must install their dependencies:


npm install webcomponent-simple-info-addons
<script src="node_modules/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script>


<script src="https://unpkg.com/webcomponent-simple-info-addons/dist/webcomponent-simple-info-addons.js"></script>

framework integration

See the official documentation of stenciljs.com


List of components in the package.


Simple use:

<simple-paragraph header="Title" message="Simple message to show"></simple-paragraph>


Property Attribute Description Type Default
header header Title (or header) string undefined
message message Message to show string undefined
mode mode Color (or mode) string 'dark'
type type The type of paragraph string 'paragraph'
width width Width of the paragraph container string '100%'
center center type == 'paragraph' ? 'Text center' : 'Container center' boolean type == 'paragraph' ? false : true

With buttons

<simple-paragraph header="Title" message="Simple message to show">
    <button type="button">Cerrar</button>

Available modes


Available types


Custom modes and types: to add or modify the modes and types you must create global css styles, for example, to create a new mode or color called primary you must add a css like:

simple-paragraph.type-paragraph.mode-primary {
    border-left:6px #387ef5 solid;

Browser Support

See the official documentation of stenciljs.com


Link to this version
ImportedReleased 10 February 2019MIT License
Framework Support
Browser Independent
Install with
npm install webcomponent-simple-info-addons"@0.4.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.4.0