Web Components by Auroratide

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.

This text is arched!

Arch Amount

<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.

The front!

The back!

Flip!

<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:

Cobb Salad

• chicken
• egg
• tomato

Fried Rice

• rice
• shrimp
• egg

Chimichanga

• chicken
• beans

Banana Pancake

• breakfast
• banana

Philly Cheese Sandwich

• steak
• cheese
• bread

<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:

Apples Oranges Bananas

Ingredients for making apple pie:

• 8 Granny Smith apples
• ½ cup butter
• 3 tablespoons flour
• ½ cup white sugar
• ½ cup brown sugar
• ¼ water
• A double-crust pie pastry

Ingredients for making orange sorbet:

• 2 cups orange juice pulp
• 1½ cup almond milk
• 1 tablespoon orange zest
• 1 tablespoon lemon juice
• ¼ teaspoon salt
• 1 teaspoon vanilla extract
• ½ teaspoon sweetener

Ingredients for making banana pudding:

• 14 bananas
• 5 ounce packet instant vanilla pudding
• 2 cups milk
• 14 ounce can condensed milk
• 1 tablespoon vanilla extract
• 12 ounces frozen whipped topping
• 16 ounces vanilla wafers

<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.

Fancy Switch

<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.

Have you tried our

• fresh salads? 🥗
• hearty burgers? 🍔
• delicious pies? 🥧

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