honeycomb-element
Version:
Webcomponent honeycomb-element following open-wc recommendations
223 lines (218 loc) • 3.88 kB
HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #fafafa;
}
</style>
</head>
<body>
<div id="demo"></div>
<script type="module">
import { html, render } from 'lit-html';
import '../dist/honeycomb-element.js';
import 'https://unpkg.com/api-viewer-element?module';
const items = [
[
{
heading: 'Core Team',
content: 'Stefan und Kathrin',
},
],
[
{
heading: 'Next Gen',
content: 'Kathrin',
},
{
heading: 'Teens',
content: '',
},
{
heading: 'Youth',
content: '',
},
{
heading: 'TWNTS',
content: '',
},
{
heading: 'Family',
content: '',
},
{
heading: 'YouTube',
content: '',
},
{
heading: 'Kids',
content: '',
},
],
[
{
heading: 'Operations',
content: 'André',
},
{
heading: 'IT',
content: '',
},
{
heading: 'Personal',
content: '',
},
{
heading: 'Krisenmanagement',
content: '',
},
{
heading: 'Gebäude',
content: '',
},
{
heading: 'Recht',
content: '',
},
{
heading: 'Finanzen',
content: '',
},
],
[
{
heading: 'Kommunikation',
content: 'Thomas',
},
{
heading: 'SocialMedia',
content: '',
},
{
heading: 'Webseite',
content: '',
},
{
heading: 'Redaktion & Presse',
content: '',
},
{
heading: 'Visual Arts',
content: '',
},
{
heading: 'Infokanäle',
content: '',
},
{
heading: 'Podcast',
content: '',
},
],
[
{
heading: 'Entwicklung & Training',
content: 'Katrin & André',
},
{
heading: 'Leadership Training',
content: '',
},
{
heading: 'Personalentwicklung',
content: '',
},
{
heading: 'Coaching',
content: '',
},
{
heading: 'Teamnight United',
content: '',
},
{
heading: 'Leaders Brunch',
content: '',
},
{
heading: 'College',
content: '',
},
],
[
{
heading: 'Celebration & Events',
content: 'Suji',
},
{
heading: 'Producing',
content: '',
},
{
heading: 'Guest Experience',
content: '',
},
{
heading: 'Events',
content: '',
},
{
heading: 'Technik',
content: '',
},
{
heading: 'Livestream',
content: '',
},
{
heading: 'Worship',
content: '',
},
],
[
{
heading: 'Church Life',
content: 'Alex',
},
{
heading: 'Kurse',
content: '',
},
{
heading: 'Gebet',
content: '',
},
{
heading: 'Pastoral Care',
content: '',
},
{
heading: 'Micro Church',
content: '',
},
{
heading: 'Social Acts',
content: '',
},
{
heading: 'Groups',
content: '',
},
],
]
const title = 'Honeycomb Demo';
render(
html`
<honeycomb-element .title=${title} .items=${items}>
some more light-dom
</honeycomb-element>
`,
document.querySelector('#demo')
);
</script>
<api-viewer src="../custom-elements.json"></api-viewer>
</body>
</html>