twig-components-example

An example Twig Component library using Webpack.

<tce-hero>

A super-charged hero element.

Attributes

CSS variables

Slots

This is a basic example using an image asset.

<tce-hero src="./assets/hero-2.jpg" text="You can do a lot" subtext="With this awesome Hero" callout-text="Learn more" callout-href="#test"></tce-hero>

This example uses custom alignment and styling.

<style>
  #styled-hero {
   --font: "Times New Roman", Times, serif;
   --text-color: #016e9e;
   --subtext-color: #016e9e;
   --callout-color: #ffffff;
   --callout-hover-color: #016e9e;
  }
</style>
<tce-hero id="styled-hero" src="./assets/hero-1.jpg" text="Oh Buoy" subtext="Set sail for pun" callout-text="Engage" callout-href="#test2" align="middle"></tce-hero>

This example adds a looping video to the media slot, and omits the callout attribute.

<tce-hero text="In a pickle?" subtext="Earn your chops today" callout-href="#test3" align="right">
  <video autoplay loop src="./assets/hero-3.webm" slot="media" style="max-width: 100%;"></video>
</tce-hero>