twig-components-example

<tce-hero>

A super-charged hero element.

Attributes

srcAn image source for the hero background.
text Main text for the hero.
subtext Sub-text of the hero.
callout-text The button text for the callout.
callout-href Where the callout button should link to.
align The alignment of the hero text and callout. Accepts left, middle, or right values. Defaults to middle.

CSS variables

--font The font-family of all hero text. Defaults to Helvetica.
--text-color The color of the main hero text. Defaults to white.
--subtext-color The color of the hero sub text. Defaults to white.
--callout-color The color of the hero callout. Defaults to white.
--callout-hover-color The hover color of the hero callout text. Defaults to black.

Slots

media If the "src" attribute is omitted, you can put other background media (ex: video) in this slot.

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>