Atomic components using ES6 template literals

templates.js

const stringify = children =>
  Array.isArray(children) ? children.join('') : children;

// atoms
const Card = (attrs, children) =>
  `<div class="card">
    ${ stringify(children) }
  </div>`;

const Header = (attrs, children) =>
  `<div class="header">
    ${ stringify(children) }
  </div>`;

const Textblock = (attrs, children) =>
  `<p class="textblock">
    ${ stringify(children) }
  </p>`;

const Button = (attrs, children) =>
  `<a class="button" href="${attrs.href}">
    ${ stringify(children) }
  </a>`;

// molecule
const ProductCard = (attrs, children) =>
  Card(null, [
    Header(null, attrs.title),
    Textblock(null, stringify(children)),
    Button({ href: attrs.href }, 'Read More')
  ]);

// organisms
const ProductCards = (products) =>
  stringify(products.map(product =>
    ProductCard({
      title: product.name,
      href: product.href
    }, product.contents)
  ));

const ProductsGrid = (attrs, children) =>
  `<section class="l-products l-products--grid">
    ${ ProductCards(attrs.items) }
  </section>`;


// templates
// use `ProductGrid` template
document.getElementById('products').innerHTML =
  ProductsGrid({
    items: [
      { name: 'Alkaline', href: '#/alkaline', contents: 'Lorem ipsum dolor sherif amet, consectetur adipiscing lantern.' },
      { name: 'Aluminium-ion', href: '#/aluminium-ion', contents: 'Seadoo eiusmod tempor incididunt ut labore et dolore magma aliqua. '},
      { name: 'Lithium', href: '#/lithium', contents: 'Lorem ipsum dolor sherif amet, consectetur adipiscing lantern.' }
    ]
  });