Hero Component

Usage

Pariatur officia aliquip exercitation adipisicing tempor id sit. Aute quis Lorem ad in qui aute nisi Lorem commodo. Qui officia consectetur nostrud laboris mollit labore quis ad occaecat sint excepteur amet irure laboris. Occaecat irure adipisicing cupidatat cupidatat qui irure consectetur dolor culpa eiusmod. Sit magna Lorem exercitation aliquip sint.

Hero with Image

Minim elit labore aliquip labore nulla reprehenderit culpa quis irure Lorem.

Content loaded in an iFrame Open in new tab
<script>
  import { Header, HeaderLeft, HeaderLogo, Hero } from "$lib/components";
  import { ImageIcon } from "svelte-feather-icons";
</script>

<Header isSticky>
  <HeaderLeft>
    <HeaderLogo>
      <ImageIcon size="32" />
    </HeaderLogo>
  </HeaderLeft>
</Header>
<Hero
  image="https://picsum.photos/seed/picsum/1440/900"
  alignment="bottomleft"
  height="100vh"
>
  <h1>Headline</h1>
  <h2>Subheadline</h2>
</Hero>