everyday-webcomponents is a collection of commonly used Web UIs as Native Web Components. The everyday-components are very light weight, accessible, written using vanilla web component APIs and does not use any framework.
Single bundle for all the components.
<script src='https://unpkg.com/everyday-webcomponents/dist/everyday-webcomponents.min.js'></script>Bundle for individual component.
// Card component bundle
<script src='https://unpkg.com/everyday-webcomponents/dist/everyday-ew-card-webcomponent.min.js'></script>
// Image Card component bundle
<script src='https://unpkg.com/everyday-webcomponents/dist/everyday-ew-image-card-webcomponent.min.js'></script>
// Carousel component bundle
<script src='https://unpkg.com/everyday-webcomponents/dist/everyday-ew-carousel-webcomponent.min.js'></script>npm install --save everyday-webcomponentsimport 'everyday-webcomponents';npm install --save everyday-webcomponentsrequire('everyday-webcomponents');The card component comes in three variations, small, regular, and compact.
<ew-card type="small" text="Lorem ipsum dolor sit amet" link="https://unsplash.com"></ew-card>
<ew-card text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/random/300x174" link="https://unsplash.com"></ew-card>
<ew-card type="compact" text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/random/300x174" link="https://unsplash.com"></ew-card>- type: By default card renders as a regular card. Use type small to render as a small card. Use type compact to render as a compact card.
- text: The text to show in card.
- image: The image to show in card.
- link: The link to navigate to when card is clicked.
- --ew-background: Set this CSS variable to change the background color.
- --ew-color: Set this CSS variable to change the font color.
- --ew-font-family: Set this CSS variable to change the font family.
- --ew-font-size: Set this CSS variable to change the font size.
The image card component comes in regular and large variations.
<ew-image-card text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/random/200x150" link="https://unsplash.com"></ew-image-card>
<ew-image-card type="large" text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/random/620x350" link="https://unsplash.com"></ew-image-card>- type: By default image card renders as a regular card. Use type large to render as a large image card.
- text: The text to show in card.
- image: The image to show in card.
- link: The link to navigate to when card is clicked.
- --ew-background: Set this CSS variable to change the background color.
- --ew-color: Set this CSS variable to change the font color.
- --ew-font-family: Set this CSS variable to change the font family.
- --ew-font-size: Set this CSS variable to change the font size.
The carousel component comes in regular and large variations.
<ew-carousel>
<ew-carousel-slide text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/620x350/?nature,water" link="https://unsplash.com"></ew-carousel-slide>
<ew-carousel-slide text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/620x350/?cars,audi" link="https://unsplash.com"></ew-carousel-slide>
<ew-carousel-slide text="Lorem ipsum dolor sit amet" image="https://source.unsplash.com/620x350/?animal,dog" link="https://unsplash.com"></ew-carousel-slide>
</ew-carousel>- type: By default carousel renders as a regular carousel. Use type large to render as a large carousel.
- text: The text to show in slide.
- image: The image to show in slide.
- link: The link to navigate to when slide is clicked.
- --ew-background: Set this CSS variable to change the background color.
- --ew-color: Set this CSS variable to change the font color.
- --ew-font-family: Set this CSS variable to change the font family.
- --ew-font-size: Set this CSS variable to change the font size.
MIT