ETR Component Library

Hero 

<div class="hero">
    <div class="relative flex items-center justify-center bg-black">
        <div class="hero__background opacity-50" style="background-image:url(https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1567&amp;q&#x3D;80);filter: grayscale(100%);"></div>
        <div class="hero__content text-center px-6 md:px-8 lg:px-0 py-16 sm:py-24 md:py-48 z-20">
            <div class="pt-8 sm:pt-10 md:pt-12">
                <h1 class="text-2xl md:text-4xl lg:text-5xl text-white font-bold">Behold! The ETR Component Library</h1>

                <h2 class="text-lg md:text-2xl font-bold text-white mt-2">A foundation and reference point for designing and building content and marketing websites.</h2>

                <p class="text-center mt-3 text-base md:text-lg text-white">Void where prohibited. Some assembly required.</p>

                <div class="hero__cta mt-6">
                    <a href="http://www.google.com" class="button button--outline button--white rounded-full">
                  Learn More
                </a>

                </div>
            </div>
        </div>
        <div class="bg-gradient opacity-75 w-full h-full absolute top-0"></div>
    </div>
    <div class="hero__caption mt-1 container mx-auto">
        <figcaption class="media-caption text-gray-darkest leading-tight text-sm mt-2">
            <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">Photographer Name</span>
            <span class="text-gray-dark text-2xs md:text-xs tracking-wide md:tracking-normal leading-none">/ Stock Image Company</span>
        </figcaption>
    </div>
</div>
 
<div class="hero">
  <div class="relative flex items-center justify-center bg-black">
    {{#if background-image}}<div class="hero__background opacity-50" style="background-image:url({{background-image.src}});filter: grayscale(100%);"></div>{{/if}}
    <div class="hero__content text-center px-6 md:px-8 lg:px-0 py-16 sm:py-24 md:py-48 {{#if background-image}}z-20{{/if}}">
      {{#if cta}}<div class="pt-8 sm:pt-10 md:pt-12">{{/if}}
        {{#if heading}}
          <h1 class="text-2xl md:text-4xl lg:text-5xl text-white font-bold">{{ heading }}</h1>
        {{/if}}

        {{#if subheading}}
          <h2 class="text-lg md:text-2xl font-bold text-white mt-2">{{ subheading }}</h2>
        {{/if}}

        {{#if text}}
          <p class="text-center mt-3 text-base md:text-lg text-white">{{ text }}</p>
        {{/if}}

        {{#if cta}}
          <div class="hero__cta mt-6">
            {{#with cta}}
              {{> @button--outline-rounded-full-white}}
            {{/with}}
          </div>
        {{/if}}
      {{#if cta}}</div>{{/if}}
    </div>
    {{#if background-image}}<div class="bg-gradient opacity-75 w-full h-full absolute top-0"></div>{{/if}}
  </div>
  {{#if background-image.caption}}
  {{#with background-image.caption}}
  <div class="hero__caption mt-1 container mx-auto">
    {{> @media-caption}}
  </div>
  {{/with}}
  {{/if}}
</div>
 
{
  "heading": "Behold! The ETR Component Library",
  "subheading": "A foundation and reference point for designing and building content and marketing websites.",
  "text": "Void where prohibited. Some assembly required.",
  "cta": {
    "url": "http://www.google.com",
    "text": "Learn More"
  },
  "background-image": {
    "src": "https://images.unsplash.com/photo-1483736762161-1d107f3c78e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80",
    "caption": {
      "photographer": "Photographer Name",
      "credit": "Stock Image Company"
    }
  }
}
  • Content: 
    .hero {
  &__background {
    @apply bg-no-repeat bg-cover bg-center w-full h-full absolute top-0;
  }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: components/05-layout-components/hero/hero.scss
  • Size: 105 Bytes

There are no notes for this item.