@lion/ui/docs/components/tabs/examples.md

A package of extendable web components

---
title: 'Tabs: Examples'
parts:
  - Tabs
  - Examples
eleventyNavigation:
  key: 'Tabs: Examples'
  order: 30
  parent: Tabs
  title: Examples
---

# Tabs: Examples

```js script
import { LitElement, html } from '@mdjs/mdjs-preview';
import './src/lea-tabs.js';
import './src/lea-tab.js';
import './src/lea-tab-panel.js';
```

## Lea Tabs

Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/blog/ing-open-sources-lion.md).

```js preview-story
export const main = () => html`
  <lea-tabs>
    <lea-tab slot="tab">Info</lea-tab>
    <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
    <lea-tab slot="tab">Work</lea-tab>
    <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
  </lea-tabs>
`;
```