Add files via upload

README.md

@@ -1,2 +1,123 @@
-# smart-card
-Smart Web Components - Card Custom Element
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/htmlelements/smart-card)
+
+# <smart-card>
+
+[Live Demo ↗](https://htmlelements.com/demos/card/)
+|
+[Documentation ↗](https://www.htmlelements.com/docs/)
+|
+[Installation ↗](https://www.npmjs.com/package/@smarthtmlelements/smarthtmlelements-core)
+
+[<smart-card>](https://htmlelements.com/demos/card/) is a Custom HTML Element providing Card view with HTML Content](https://htmlelements.com/).
+
+<!--
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../smart-core/source/smart.core.js"></script>
+    <link rel="stylesheet" href="../smart-core/source/styles/smart.default.css" type="text/css" />
+	<style>
+		body {
+			margin: 0px;
+			padding: 0px;
+		}
+
+		smart-card.basic-card .card-content,
+		smart-card.basic-card .card-action {
+			box-sizing: border-box;
+			padding: 20px;
+			color: white;
+			background-color: #546E7A;
+			border-bottom: 1px solid rgba(160,160,160,0.2);
+			border-radius: 2px 2px 2px 2px;
+		}
+
+		smart-card.basic-card .card-title {
+			font-size: 18px;
+		}
+
+		smart-card.basic-card a {
+			color: #ffab40;
+			transition: color .3s ease;
+			text-transform: uppercase;
+			border-bottom: none;
+			text-decoration: none;
+			margin-right: 20px;
+		}
+
+			smart-card.basic-card a:hover {
+				color: #ffd8a6;
+			}
+	</style>
+     <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+   <smart-card class="basic-card">
+        <div class="card-content">
+            <span class="card-title">Card Title</span>
+            <p>
+                I am a very simple card. I am good at containing small bits of information.
+                I am convenient because I require little markup to use effectively.
+            </p>
+        </div>
+        <div class="card-action">
+            <a href="#">This is a link</a>
+            <a href="#">This is a link</a>
+        </div>
+    </smart-card>
+```
+
+[<img src="https://raw.githubusercontent.com/htmlelements/smart-card/master/smart-card-web-component.png" alt="Screenshot of smart-card">](https://htmlelements.com/demos/card/)
+
+## Getting Started
+
+Smart HTML Elements components documentation includes getting started, customization and api documentation topics.
+
+[Getting Started Documentation](https://www.htmlelements.com/docs/)
+
+
+## The file structure for Smart HTML Elements
+
+- `source/`
+
+  Javascript files.
+
+- `source/styles/`
+
+  Component CSS Files.
+
+- `demos/`
+
+  Demo files
+
+## Running demos in browser
+
+1. Fork the `Smart-HTML-Elements-Core` repository and clone it locally.
+
+1. Make sure you have [npm](https://www.npmjs.com/) installed.
+
+1. When in the `Smart-HTML-Elements-Core` directory, run `npm install` and then `bower install` to install dependencies.
+
+1. Run a localhost or upload the demo on a web server. Then run:
+
+  - /demos/smart-card/smart-card-overview.htm
+
+
+## Following the coding style
+
+We are using [ESLint](http://eslint.org/) for linting JavaScript code. 
+
+## Creating a pull request
+
+  - Make sure your code is compliant with ESLint
+  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
+  - Wait for response from one of our team members
+
+
+## License
+
+Apache License 2.0

bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "smart-card",
+  "authors": [
+    "jQWidgets Ltd"
+  ],
+  "description": "Smart Card is a free HTML Card Custom Element, built using native Javascript and CSS.",
+  "license": "Apache-2.0",
+  "keywords": [
+    "Smart Card",
+    "Card Web Component",
+    "JS Card",
+    "html Card",
+    "javascript Card" 
+  ],
+  "main": "",
+  "ignore": [
+    "**/.*",
+    "**/node_modules",
+    "**/bower_components",
+    "**/tests"
+  ],
+  "dependencies": {
+    "webcomponentsjs": "^1.0.0",
+    "smart-core": "HTMLElements/smart-core"
+  }
+}

demos/smart-card-overview.htm

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
+
+    <link rel="stylesheet" href="../../smart-core/source/styles/smart.default.css" type="text/css" />
+    <!--! do not remove --> 
+   <link rel="stylesheet" href="../styles/demos.css" type="text/css" />
+   <script type="text/javascript" src="../../smart-core/source/smart.core.js"></script>
+   <style>
+		body {
+			margin: 0px;
+			padding: 0px;
+		}
+
+		smart-card.basic-card .card-content,
+		smart-card.basic-card .card-action {
+			box-sizing: border-box;
+			padding: 20px;
+			color: white;
+			background-color: #546E7A;
+			border-bottom: 1px solid rgba(160,160,160,0.2);
+			border-radius: 2px 2px 2px 2px;
+		}
+
+		smart-card.basic-card .card-title {
+			font-size: 18px;
+		}
+
+		smart-card.basic-card a {
+			color: #ffab40;
+			transition: color .3s ease;
+			text-transform: uppercase;
+			border-bottom: none;
+			text-decoration: none;
+			margin-right: 20px;
+		}
+
+			smart-card.basic-card a:hover {
+				color: #ffd8a6;
+			}
+   </style>
+</head>
+<body>
+    <smart-card class="basic-card">
+        <div class="card-content">
+            <span class="card-title">Card Title</span>
+            <p>
+                I am a very simple card. I am good at containing small bits of information.
+                I am convenient because I require little markup to use effectively.
+            </p>
+        </div>
+        <div class="card-action">
+            <a href="#">This is a link</a>
+            <a href="#">This is a link</a>
+        </div>
+    </smart-card>
+</body>
+</html>

package.json

@@ -0,0 +1,43 @@
+{
+ "name": "@smarthtmlelements/smart-card",
+ "version": "2.0.2",
+ "description": "Smart Card",
+ "scripts": {},
+ "repository": {
+  "type": "git",
+  "url": "git+https://github.com/HTMLElements/smart-card.git"
+ },
+ "author": "Smart HTML Elements",
+ "license": "SEE LICENSE IN https://www.htmlelements.com/license/",
+ "bugs": {
+  "url": "https://github.com/HTMLElements/smart-card"
+ },
+ "homepage": "https://github.com/HTMLElements/smart-card#readme",
+ "devDependencies": {},
+ "dependencies": {
+  "@webcomponents/webcomponentsjs": "^1.0.22",
+  "@smarthtmlelements/smart-core": "^2.0.1"
+ },
+ "main": "index.js",
+ "directories": {},
+ "keywords": [
+  "custom",
+  "element",
+  "card custom element",
+  "html card",
+  "card",
+  "web components card",
+  "card element",
+  "banner rotator",
+  "custom card",
+  "card widget",
+  "card ui",
+  "card component",
+  "card control",
+  "banner",
+  "banner element",
+  "banner user interface",
+  "material banner",
+  "material carousel"
+ ]
+}

styles/demos.css

@@ -0,0 +1,8 @@
+smart-carousel {
+    width: 1000px;
+    height: 450px;
+    border-width: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #d3d3d369;
+}