Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/auroratide/web-components
https://github.com/auroratide/web-components
Last synced: about 14 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/auroratide/web-components
- Owner: Auroratide
- License: isc
- Created: 2022-09-03T20:28:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-24T11:22:09.000Z (8 months ago)
- Last Synced: 2024-04-25T13:40:52.443Z (7 months ago)
- Language: JavaScript
- Size: 6.53 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Components by Auroratide
View this page with live demos!
This is just a bunch of highly reusable, fully accessible **[web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)** you can use on your websites! Why web components?
* It's part of the [HTML Standard](https://html.spec.whatwg.org/#custom-elements), so they work in [every web framework](https://custom-elements-everywhere.com/), or with no framework at all.
* They are [fast and small](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/) compared to components in frameworks, since there's zero library overhead.
* They facilitate [progressive enhancement](https://kryogenix.org/code/browser/everyonehasjs.html): viewers get a basic view of content before the Javascript makes it functional.
Made by Auroratide, a developer with a passion for the web, inclusive design, and storytelling ❤️
## The arched-text Element
**View**: [The arched-text Element](https://components.auroratide.com/arched-text)
An element that forms an arch out of text.
```html
This text is arched!
```
## The flip-card Element
**View**: [The flip-card Element](https://components.auroratide.com/flip-card)
An element that flips beautifully between a front and back side.
```html
The front!
The back!
```
## The img-zoom Element
**View**: [The img-zoom Element](https://components.auroratide.com/img-zoom)
An element that accessibly zooms in on an image when the user wants to see more details.
```html
```
## The reorder-list Element
**View**: [The reorder-list Element](https://components.auroratide.com/reorder-list)
A set of elements (`reorder-list` and `reorder-item`) that work together to make a rearrangeable list:
```html
Cobb Salad
Fried Rice
Chimichanga
Banana Pancake
Philly Cheese Sandwich
```
## The tab-list Element
**View**: [The tab-list Element](https://components.auroratide.com/tab-list)
A set of elements (`tab-list`, `tab-item`, and `tab-panel`) that work together to make a tabbing interface:
```html
Apples
Oranges
Bananas
Ingredients for making apple pie!
Ingredients for making orange sorbet!
Ingredients for making banana pudding!
```
## The table-of-contents Element
**View**: [The table-of-contents Element](https://components.auroratide.com/table-of-contents)
A component that automatically generates a table of contents.
```html
```
## The toggle-switch Element
**View**: [The toggle-switch Element](https://components.auroratide.com/toggle-switch)
A form control representing something is on or off.
```html
Fancy Switch
```
## The typewritten-text Element
**View**: [The typewritten-text Element](https://components.auroratide.com/typewritten-text)
An element that types one letter at a time to the screen.
```html
Have you tried our
- fresh salads? 🥗
- hearty burgers? 🍔
- delicious pies? 🥧
```