Lion is a set of white label cross-platform Web Components with accessibility and performance built-in. You can extend them with your own styling to create a complete Design System with little effort.

Screenshots of different dropdowns or comboboxes. They’re styled like Google, GitHub and WhatsApp.
Screenshots of different dropdowns or comboboxes. They’re styled like Google, GitHub and WhatsApp.
Styling is extremely flexible

This blog will demonstrate that extending Lion is not limited to components. Documentation and demos can be reused as well. This removes duplicate work such as writing and maintaining documentation.

A naming convention that is similar to Lion* for class names and lion-* for tag names is required for this to work. For this demo, we use the the names ExampleButton and example-button.

Table of Contents

  1. Setting up, and Extending Lion

Setting up, and extending Lion

This article assumes some basic terminal knowledge, and…

Erik Kroes

I like to sink my teeth into a challenge, get the most out of people and situations, and create structure where there is none.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store