# svelma-pro
Hero headers

# Hero

## Hero headers

Codesandbox

# Title

## Subtitle

    <script>
      import { slide } from 'svelte/transition'

      const types = ['is-primary', 'is-success', 'is-danger', 'is-warning', 'is-info', 'is-link']
      let type = 'is-primary'

      async function update() {
        type = ''

        setTimeout(() => {
          type = types[Math.floor(Math.random() * types.length)];
        }, 1000)
      }
    </script>

    <button class="button is-primary" on:click={update}>Update Hero</button>

    <br />
    <br />

    {#if type}
      <section class="hero {type}" transition:slide>
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              Title
            </h1>
            <h2 class="subtitle">
              Subtitle
            </h2>
          </div>
        </div>
      </section>
    {/if}