Web Component Templates
Interactive demonstration of HTML/Liquid template system with matching HTML5/SCSS/ES6 namespaces. Templates are not rendered on page load but instantiated dynamically via JavaScript.
Product Card Template
Namespace: product-card.html → _product-card.scss → product-card.js
// JavaScript instantiation
import { createProductCard } from './product-card.js';
const card = createProductCard({
title: 'Genesis AI Platform',
description: 'Advanced AI capabilities',
url: '/products/genesis-ai',
image: '/images/genesis-ai.jpg',
demoUrl: 'https://demo.genesis.ai'
});
container.appendChild(card);
Testimonial Card Template
Namespace: testimonial-card.html → _testimonial-card.scss → testimonial-card.js
// JavaScript instantiation
import { createTestimonialCard } from './testimonial-card.js';
const testimonial = createTestimonialCard({
text: 'This platform transformed our workflow!',
name: 'Sarah Chen',
company: 'TechCorp Inc.'
});
container.appendChild(testimonial);
Alert Card Template
Namespace: alert-card.html → _alert-card.scss → alert-card.js
// JavaScript instantiation
import { showAlert } from './alert-card.js';
showAlert({
type: 'success',
title: 'Success!',
message: 'Operation completed successfully.',
dismissible: true
}, container, 5000); // Auto-dismiss after 5s
Template System Architecture
HTML Templates
📁 _includes/components/
- Wrapped in
<template>tags - Not rendered on page load
- Semantic class names (BEM pattern)
- Accessible by JavaScript
SCSS Styling
📁 _sass/components/
- Genesis Ontological mixins
- Matching component namespace
- Semantic, purposeful styling
- Responsive by default
JavaScript
📁 assets/js/components/
- Template instantiation utilities
- Data population helpers
- Component-specific factories
- ES6 modules with exports