<Hero title="primary" type="primary" textLead="Text lead..." />
<Hero title="secondary" type="secondary" textLead="Text lead..." />
<Hero title="success" type="success" textLead="Text lead..." />
<Hero title="warning" type="warning" textLead="Text lead..." />
<Hero title="danger" type="danger" textLead="Text lead..." />

<Hero title="small" size="small" textLead="Text lead..." />
<Hero title="default" size="default" textLead="Text lead..." />
<Hero title="large" size="large" textLead="Text lead..." />
<Hero title="fullheight" size="fullheight" textLead="Text lead..." />

<Hero type="primary">
  {#snippet title()}<h3>SPAPER</h3>{/snippet}
  {#snippet textLead()}PapierCSS components for Svelte{/snippet}

  <p>Check it out</p>
  <Button type="secondary" href="https://oli8.github.io/spaper">
    Documentation
  </Button>
</Hero>

<Hero
  type="danger"
  border={false}
  title="Hero"
  textLead="Borderless hero"
/>
<Hero
  class="border-4"
  title="spaper"
  textLead="PaperCSS components for Svelte"
  style="background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    url(/bg-hero.png);
    background-size: cover;"
/>