FAA Pattern Library - Landscape Architecture

Homepage Hero Section 

<div class="landarch-hero">
    <div class="landarch-hero__container">
        <div class="landarch-hero__heading-container">
            <h1 class="landarch-hero__heading">
                Trust your instincts, don’t do what you’re supposed to do. No apologies.
            </h1>
        </div>
        <div class="landarch-hero__video">
            <div class="video-block" data-video-block data-is-paused="false">
                <video class="video-block__video" poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" data-video loop autoplay muted playsinline height="560" width="864">
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
        Sorry, your browser doesn't support embedded videos.
    </video>
                <button class="video-block__play-button" data-video-play data-video aria-label="Pause video">
        <svg class="video-block__button-icons" width="32" height="32" viewBox="0 0 32 32" fill="none"
             xmlns="http://www.w3.org/2000/svg">
            <circle
                class="video-block__button-background video-block__button-background--orange"
                cx="16" cy="16" r="16" fill="#1D2126"/>
            <g class="video-block__pause-icon" fill="white">
                <path d="M14 10H10V22H14V10Z"/>
                <path d="M22 10H18V22H22V10Z"/>
            </g>
            <g class="video-block__play-icon" fill="white">
                <path d="M22 16L12 10V22L22 16Z"/>
            </g>
        </svg>
    </button>
            </div>
        </div>
    </div>
</div>
 
<div class="landarch-hero">
    <div class="landarch-hero__container">
        <div class="landarch-hero__heading-container">
            <h1 class="landarch-hero__heading">
                {{ hero.heading }}
            </h1>
        </div>
        <div class="landarch-hero__video">
            {% include 'partials/video-block/video-block.twig' with {
                video: hero.video,
                altText: hero.altText,
                thumbnail: hero.thumbnail,
                mimeType: 'video/mp4',
                controlsHoverColor: 'orange',
                posterResize: [1200, 900]
            } %}
        </div>
    </div>
</div>
 
{
  "siteUnit": "landarch",
  "departmentName": "Landscape Architecture",
  "background": "light",
  "hero": {
    "heading": "Trust your instincts, don’t do what you’re supposed to do. No apologies.",
    "video": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    "altText": "Alt text",
    "thumbnail": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
    "mimeType": "video/mp4"
  }
}
  • Handle: @landarch-hero
  • Preview:
  • Filesystem Path: components/partials/homepages/landarch/hero/landarch-hero.twig

There are no notes for this item.