Project Banner

<div class="flex w-full items-center gap-4 rounded-xl border border-border border-t-2 border-t-accent bg-bg-surface p-4">
  <span class="size-8 shrink-0 rounded-full border-2 border-current text-text-tertiary"></span>
  <div class="min-w-0 text-sm">
    <p class="font-medium text-text-primary">mrkdwn / production</p>
    <p class="text-text-tertiary">deploy queued</p>
  </div>
  <Button variant="outline" size="sm" className="ml-auto">View build</Button>
</div>

{/* top-border color carries the status */}
<div class="border-t-2 border-t-success ...">deploy ready</div>
<div class="border-t-2 border-t-warning ...">build queued</div>
<div class="border-t-2 border-t-error ...">deploy failed</div>