Empty state

A centered card that pairs an icon, a heading, and a single primary action.

No projects yet

Create your first project to get started.

Show editor

<div
  class="surface-base b-all bc-subtle br-xl p-xl stack-v items-center w-max-7"
>
  <span class="v-icon fs-2xl ink-subtle" data-v-icon="plus"></span>
  <h3 class="fs-l fw-bold mt-m">No projects yet</h3>
  <p class="fs-s ink-subtle ta-center mt-2xs">
    Create your first project to get started.
  </p>
  <button class="v-button mt-m" data-size="small">Create project</button>
</div>