i80 Design System Web Components

Web Components

The i80 Design System as <i80-*> tags. They render real HTML with the i80 styles, so they work in plain HTML and in Django, Flask, Rails or PHP templates, with no build step.

Getting started

Add the stylesheet and the script to your page, then use the tags:

/v// is a frozen release: it never changes and is cached forever. /latest/ follows the newest version, for trying things out.

Server-rendered apps

Native elements you write inside a tag are kept and only styled. So a server-rendered form keeps its field names, ids, values and CSRF token, and it still works before JavaScript has loaded:

HTMX swaps work too: new <i80-*> tags are set up as soon as they are inserted.

See a whole screen built from these tags: app header, side navigation, a sortable table, pagination, a modal and the calendar.