<div class="animate-pulse space-y-4">
  <div class="h-6 w-1/3 rounded-s bg-surface-secondary"></div>
  <div class="h-4 w-full rounded-s bg-surface-secondary"></div>
  <div class="h-4 w-2/3 rounded-s bg-surface-secondary"></div>
</div>

<div class="flex flex-col items-center justify-center py-16 text-center">
  <div class="flex h-12 w-12 items-center justify-center rounded-m
              bg-surface-secondary text-label-tertiary">
    <!-- Icon -->
  </div>
  <h3 class="mt-4 text-title font-semibold text-label-primary">
    Geen resultaten
  </h3>
  <p class="mt-1 text-body text-label-secondary">
    Probeer een andere zoekopdracht.
  </p>
</div>

<div class="rounded-m border border-label-critical/20 bg-surface-critical/10 p-4">
  <h3 class="text-body font-medium text-label-critical">Er ging iets mis</h3>
  <p class="mt-1 text-caption text-label-secondary">
    Probeer het opnieuw of neem contact op.
  </p>
  <button class="mt-3 rounded-s border border-label-critical px-3 py-1.5
                 text-caption font-medium text-label-critical
                 transition-colors duration-150
                 hover:bg-label-critical hover:text-label-on-color">
    Opnieuw proberen
  </button>
</div>

<div class="fixed bottom-4 right-4 flex items-center gap-3 rounded-m
            bg-surface-success px-4 py-3 text-label-on-color shadow-md
            transition-all duration-250">
  <span class="text-body font-medium">Opgeslagen</span>
</div>