View this page with live demos!
This is just a bunch of highly reusable, fully accessible web components you can use on your websites! Why web components?
- It's part of the HTML Standard, so they work in every web framework, or with no framework at all.
- They are fast and small compared to components in frameworks, since there's zero library overhead.
- They facilitate progressive enhancement: 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 ❤️
View: The flip-card Element
An element that flips beautifully between a front and back side.
<flip-card>
<section slot="front">
<p>The front!</p>
</section>
<section slot="back">
<p>The back!</p>
</section>
</flip-card>View: The reorder-list Element
A set of elements (reorder-list and reorder-item) that work together to make a rearrangeable list:
<reorder-list>
<reorder-item>
<strong>Cobb Salad</strong>
</reorder-item>
<reorder-item>
<strong>Fried Rice</strong>
</reorder-item>
<reorder-item>
<strong>Chimichanga</strong>
</reorder-item>
<reorder-item>
<strong>Banana Pancake</strong>
</reorder-item>
<reorder-item>
<strong>Philly Cheese Sandwich</strong>
</reorder-item>
</reorder-list>View: The tab-list Element
A set of elements (tab-list, tab-item, and tab-panel) that work together to make a tabbing interface:
<tab-list aria-label="Fruit dessert recipes">
<tab-item for="tab-1" selected>Apples</tab-item>
<tab-item for="tab-2">Oranges</tab-item>
<tab-item for="tab-3">Bananas</tab-item>
</tab-list>
<div class="tab-panels-container">
<tab-panel id="tab-1">
<p>Ingredients for making apple pie!</p>
</tab-panel>
<tab-panel id="tab-2">
<p>Ingredients for making orange sorbet!</p>
</tab-panel>
<tab-panel id="tab-3">
<p>Ingredients for making banana pudding!</p>
</tab-panel>
</div>View: The toggle-switch Element
A form control representing something is on or off.
<label for="toggle-switch">Fancy Switch</label>
<toggle-switch id="toggle-switch"></toggle-switch>View: The typewritten-text Element
An element that types one letter at a time to the screen.
<div class="sentence">
<p>Have you tried our</p>
<ul class="typewriter-cycle">
<li><typewritten-text>fresh salads? 🥗</typewritten-text></li>
<li><typewritten-text paused>hearty burgers? 🍔</typewritten-text></li>
<li><typewritten-text paused>delicious pies? 🥧</typewritten-text></li>
</ul>
</div>