This is a small app to use webcomponents for a case study.
Not using any framework in the background. Just stencil bundeling to run in any browser supporting web components.
Stencil and this app use npm and node to run the project.
Run npm install to setup all needed dependecies
Run npm start to run the webserver.
The preview is a single index.html file showing all components.
The code is not production ready.
These are the current components available:
- Tabs - Show different a shadow dom based on user input. Expects a child Tab element.
Alternative version with the propertyalign=vertical.- Tab - Renders its content if active.
- Card layout - A grid of child elements. Displaying max 3 element on large screens down to 1 on small screens.
Created to work with Card elements. - Card - A card showing an image header text and a short decription. All optional properties, best looking result with all.
Optional positioning of the image with property:imagepos= top | center | bottom
The colors used in the project are from Lillestrøm municipality design system (website, Colors profile of the design system)