@keditor/components

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful

Usage no npm install needed!

<script type="module">
  import keditorComponents from 'https://cdn.skypack.dev/@keditor/components';
</script>

README

Generic Keditor Web Components

Our project aims to create a library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful.

A demo of the current components can be found at: IN PROGRESS (DEMO VIDEO).

Usage

Via NPM

Components can be installed via NPM

npm i @keditor/components

And imported in your code via ES imports:

import '@keditor/components/socialmedia';
import '@keditor/components/card';
import '@keditor/components/slider';
import '@keditor/components/heromedia';

Via CDN

Alternatively you can load the components from a CDN and drop them in your HTML file as a script tag.

<script type="module">
  import keditorContentfulComponent from 'https://cdn.skypack.dev/@keditor/components';
</script>

<social-media id="contentful (entry.sys.id)" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></social-media>
<card-component id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></card-component>
<slider-component id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></slider-component>
<hero-media id="{entry.sys.id}" space="contentful (Space ID)" accessToken="contentful (Content Delivery API - access token)" environment="contentful (environment)"></hero-media>

Guiding Principles