@smarthtmlelements/smart-card

Smart Card


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, card-component, card-custom-element, card-view, cardview, custom-cards, custom-elements, ecmascript, html-elements, html5, smart-card, smart-custom-elements, ui-components, ui-toolkit, web-component, web-components
Licenses
NTP/MIT-feh
Install
npm install @smarthtmlelements/smart-card@2.0.2

Documentation

Published on webcomponents.org

<smart-card>

Live Demo ↗ | Documentation ↗ | Installation ↗

<smart-card> is a Custom HTML Element providing Card view with HTML Content](https://htmlelements.com/).

   <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>

Screenshot of smart-card

Getting Started

Smart HTML Elements components documentation includes getting started, customization and api documentation topics.

Getting Started Documentation

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.

  2. Make sure you have npm installed.

  3. When in the Smart-HTML-Elements-Core directory, run npm install and then bower install to install dependencies.

  4. 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 for linting JavaScript code.

Creating a pull request

  • Make sure your code is compliant with ESLint
  • Submit a pull request with detailed title and description
  • Wait for response from one of our team members

License

Apache License 2.0