<section class="content-block template-hero-unit bg-video bg-dark">
    <div class="bg-container">
    <div class="overlay"></div>
        <video class="lazy-load" muted playsinline autoplay loop preload="none">
            <source data-src="/nto/assets/video/placeholder.mp4" type="video/mp4">
        </video>
    </div>
    <div class="grid-container">
    <div class="hero-unit__content">
        <header class="hero-unit__header">
            <h1 class="hero-unit__headline">The Headline</h1>
            <h2 class="hero-unit__subheadline">The Subheadline</h2>
        </header>
        <div class="hero-unit__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit architecto iusto necessitatibus accusantium aliquid non quod? Doloremque asperiores corporis.</div>
            <div class="hero-unit__buttons">
                <a href="/nto/design-system" class="button">Components</a>
            </div>
        </div>
    </div>
</section>

{{ template("hero-unit", {
  "bg": {
    "video": "/assets/video/placeholder.mp4"
  },
  "class": "bg-dark",
  "headline": "The Headline",
  "subheadline": "The Subheadline",
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit architecto iusto necessitatibus accusantium aliquid non quod? Doloremque asperiores corporis.",
  "buttons": [
    {
      "label": "Components",
      "url": "/design-system"
    }
  ]
}) }}