Web Components by Auroratide

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 ❤️

The arched-text Element

View: The arched-text Element

An element that forms an arch out of text.

<arched-text>This text is arched!</arched-text>

The flip-card Element

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>

The img-zoom Element

View: The img-zoom Element

An element that accessibly zooms in on an image when the user wants to see more details.

<img-zoom>
	<img
		src="fruit.png"
		alt="Apples and such arranged on a table."
		width="1920"
		height="1470"
	/>
</img-zoom>

The reorder-list Element

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>

The tab-list Element

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>

The table-of-contents Element

View: The table-of-contents Element

A component that automatically generates a table of contents.

<table-of-contents
	for="main"
	aria-label="Table of Contents"
></table-of-contents>

The toggle-switch Element

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>

The typewritten-text Element

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>