ConnectionCard

A connected account or service: who, its state, a quiet detail and actions. Pick it for Git hosts, trackers or any integration settings.

ConnectionCard

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

Dark theme, ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

High contrast theme, ConnectionCard

Ada Lovelace

@adaConnectedGitHubhttps://github.com · 2 e-mail addresses

Grace Hopper

@graceToken missingGitLabhttps://gitlab.example.com/self-managed-instance-with-a-long-address · 1 e-mail address

Alan Turing

@alanSign-in expired

UsageLink to the section Usage

tsx

import { ConnectionCard } from '@skribly/ui/ops'

tsx

<ConnectionCard avatar={<VcsBadge kind={a.kind} size={36} />} name={a.name} handle={`@${a.login}`}
  status={a.hasSecret ? { tone: 'ok', label: t('accounts.connected') } : { tone: 'warn', label: t('accounts.noToken') }}
  detail={a.url} actions={<Button size="sm" onPress={() => browse(a)}>{t('accounts.repositories')}</Button>} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

An article named by its heading.
The state is a badge with an icon and a word.
While checking, the card sets aria-busy and shows a named spinner.
Long addresses wrap anywhere, and the actions move under the text on a narrow card.

This demo runs through axe in all three themes on every test run. See what the tests check.