ServiceCard

Service status row with latency + sparkline.

A service tile showing name, host, status tone, latency, and a sparkline. Renders as a real `<a>` when given an `href`, supports `loading` skeletons and a `disabled` inert state, an optional relative "last checked" footer, and an extra metadata snippet. Interactive by default with a visible focus ring.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { ServiceCard } from 'dssoca';
</script>

<ServiceCard
  name="movies-api"
  host="movies.home"
  status="up"
  latency="4ms"
  href="/services/movies-api"
  updatedAt={new Date()}
/>

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-svc" role="button" tabindex="0" aria-label="api, up">
  <div class="head">
    <div>
      <div class="name">api</div>
      <div class="host">10.0.0.2</div>
    </div>
  </div>
  <div class="status">
    <span class="ss-badge positive">up</span>
    <div class="latency">12ms</div>
  </div>
  <div class="footer">
    <div class="ss-spark" data-variant="bars" role="img" aria-label="Trend rising: 3 to 7 over 7 points, range 3 to 9.">
      <i aria-hidden="true" style="height:8%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:33.33333333333333%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:16.666666666666664%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:83.33333333333334%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:50%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:100%;background:var(--ss-primary)"></i>
      <i aria-hidden="true" style="height:66.66666666666666%;background:var(--ss-primary)"></i>
    </div>
    <div class="foot-meta">
      <span class="latency open">
        <span aria-hidden="true">▸</span>
        open
      </span>
    </div>
  </div>
</div>

Props

Prop	Type	Default	Description
`name`	`string`	—	Required. Service name.
`host`	`string`	—	Required. Host string.
`status`	`'up' \| 'deg' \| 'down' \| 'maint'`	`'up'`	Status tone (also folded into the accessible name).
`latency`	`string`	`''`	Latency text (e.g. "4ms").
`spark`	`number[]`	—	Sparkline series (has a built-in default).
`href`	`string`	—	When set, the card renders as a real <a> and navigates here.
`onclick`	`() => void`	—	Click handler (for the non-link interactive card).
`loading`	`boolean`	`false`	Render skeleton placeholders and mark aria-busy; suppresses interaction.
`disabled`	`boolean`	`false`	Non-interactive variant: aria-disabled, no focus/pointer, no onclick.
`updatedAt`	`Date \| string`	—	"Last checked" instant; rendered as relative time in a <time datetime> footer.
`meta`	`Snippet`	—	Optional extra metadata rows (version, IP, tags…) below the head.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.