{{#> web/layout/default title="Empty State" parentPageName="Components" isUnstable=true }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-900);">
        <div class="Stack UNSTABLE_EmptyState__section">
          <div class="docs-Placeholder" style="max-width: 400px">
            <svg xmlns="http://www.w3.org/2000/svg" width="82" height="40" viewBox="0 0 82 40" fill="none">
              <rect x="1.5" y="0.5" width="79" height="39" stroke="#b9b9b9" stroke-dasharray="4 4"></rect>
              <path d="M1 29L24.1884 15.814L35.7826 24.1163L64.7681 8L81 24.1163" stroke="#b9b9b9" stroke-width="0.8"
                    stroke-dasharray="4 4"></path>
            </svg>
            <div class="docs-Placeholder__text">
              <p class="typography-body-medium-bold mb-0">Placeholder</p>
              <p class="typography-body-small-regular text-secondary">Replace me with your own component</p></div>
          </div>
        </div>
        <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
             style="--stack-spacing: var(--spirit-space-600);">
          <h2 class="typography-heading-xsmall-bold">Headline</h2>
          <p class="typography-body-medium-regular">
            In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements
          </p>
        </div>
        <div class="Stack UNSTABLE_EmptyState__section">
          <div class="UNSTABLE_ActionLayout">
            <a href="#" role="button" class="Button Button--primary Button--medium">Action</a>
            <a href="#" role="button" class="Button Button--secondary Button--medium">Action</a>
          </div>
        </div>
        <div class="Stack UNSTABLE_EmptyState__section"><a href="#" class="link-primary">Link to something</a></div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}