valle-card | Vaadin

Awesome valle card - Web Component using Polymer 2x


Awesome valle card element - Web Component using Polymer 3x

How to install and use:

1 - Install the element using Yarn:

$ yarn add @valle/valle-card

2 - Import the element:

<script type="module" src="node_modules/valle-card/valle-card.js"></script>

or in your javascript file

import "valle-card/valle-card.js";

3 - Start using it!



The following custom properties and mixins are available for styling:

Custom property Default Description
--valle-card-bg-color #fff Valle card background color
--valle-card-width 400px Valle card max-width
--valle-card-padding 16px Valle card padding
--valle-card-margin 16px Valle card margin (used to calculate the valle card width)

Browser Support

Using the webcomponents.js:

Chrome Opera Firefox Safari IE Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11+ Latest ✔


1 - Verify if you have node and yarn installed.

2 - Install Polymer-CLI:

$ [sudo] yarn global add polymer-cli

3 - Install local dependencies:

$ yarn install

4 - Start the development server:

$ polymer serve

Go to localhost:8080/components/valle-card/


To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.


Find on our issues the next steps of the project ;)
Want to contribute? Follow these recommendations.


See Releases for detailed changelog.


MIT License © valleweb


Link to this version
ImportedReleased 11 September 2018MIT License
Framework Support
Polymer 3.0+
Also supported:
Polymer 2 (1.0.0)
Browser Independent
Install with
npm install @valle/valle-card"@0.1.2"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.2


  • @polymer/polymer#^3.0.0