Web Components Demo

DownloadLink Component

Automatic file type icons based on extension:

PDF Report
Word Document
Excel Spreadsheet
PowerPoint
PNG Image
SVG Vector
Audio File
Video File
ZIP Archive
JavaScript
TypeScript
JSON Data

Grid Layout

User Manual
Complete documentation for the product including setup instructions and troubleshooting guide.

Custom Icon Size

Large Icon Example

DisclosureTriangle Component

Basic Example

This content is hidden by default. Click the triangle or label to toggle visibility.

The animation is smooth and the component is fully accessible.

 Starts Open

This disclosure starts in the open state because it has the open attribute.

Instead of using a slot, you can set the label via the label attribute.

 Slow Animation (600ms)

This disclosure has a slower animation duration.

Customize the speed with the duration attribute.

 Nested Content

Disclosures can contain any HTML content:

  • Lists
  • Images
  • Other components
Even Nested Disclosures!

This is a nested disclosure triangle.

Usage

<!-- Include the bundle -->
<script src="dist/download-link.min.js"></script>

<!-- Use the components -->
<download-link file="report.pdf">
  Download Report
</download-link>

<disclosure-triangle>
  <span slot="label">More Info</span>
  <p>Hidden content here</p>
</disclosure-triangle>