IntegrationCard
components/integration/Card.vue
Integration connector card with two states sharing one grid so names align when stacked: active promotes the connector to a primary-bordered stat card (logo cell, name + "active", value/label stats, config rail); available is a recessed add-row (logo chip, name + description, dashed add button).
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20none;%20}%20.st1%20{%20fill:%20%2391c15a;%20}%20%3c/style%3e%3c/defs%3e%3cg%20id='Layer_2'%3e%3cg%20id='invisible_box'%3e%3crect%20class='st0'%20width='800'%20height='800'/%3e%3c/g%3e%3cg%20id='Q3_icons'%3e%3cpath%20class='st1'%20d='M625,66.7H175c-59.8,0-108.3,48.5-108.3,108.3v450c0,59.8,48.5,108.3,108.3,108.3h450c59.8,0,108.3-48.5,108.3-108.3V175c0-59.8-48.5-108.3-108.3-108.3ZM560,435c0,1.7,0,3.3-3.3,5l-311.7,156.7c-1.7,1.7-5-1.7-5-3.3v-80c0-1.7,0-3.3,1.7-3.3l226.7-113.3-226.7-115c-1.7,0-1.7-1.7-1.7-3.3v-80c0-1.7,3.3-5,5-3.3l311.7,156.7c2.1,1.6,3.3,4,3.3,6.7v76.7Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Splunk active
278kevents12.3kfindings
Stacked states — names align
Splunk active
278kevents12.3kfindings
DatadogSend findings and agent events
'%20/%3e%3cpath%20d='M9,6.53A2.88,2.88,0,0,1,11.84,9a.49.49,0,0,0,.49.4h1.4a.49.49,0,0,0,.5-.53,5.26,5.26,0,0,0-10.46,0,.49.49,0,0,0,.5.53h1.4A.49.49,0,0,0,6.16,9,2.88,2.88,0,0,1,9,6.53Z'%20fill='%23c3f1ff'%20/%3e%3ccircle%20cx='9'%20cy='9.4'%20r='1.91'%20fill='%23fff'%20/%3e%3c/svg%3e)
Microsoft SentinelSend findings and agent events
Scenarios
Slack active
Email digestDaily digest of routed findings
An integration connector with an unreasonably long display nameAn extremely long single-line purpose description that should truncate rather than wrap or push the add button out of its rail
Okta active
1,204users matched86groups312app assignments14stale
components/integration/Card.vue
Usage
<IntegrationCard
name = "(required)"
logoId = "—"
mark = "—"
state = "available"
:stats = "[]"
description = "—"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | String | (required) | Connector display name. |
| logoId | String | '' | IntegrationLogo asset stem, e.g. "splunk". |
| mark | String | '' | Fallback initials when logoId has no asset. |
| state | String | 'available' | 'active' | 'available'. |
| stats | Array | [] | Active only: [{ value, label }] pairs rendered as primary-colored stats. |
| description | String | '' | Available only: one-line purpose/what-it-would-carry text. |
Events
| Event | Description |
|---|---|
| config | Config rail clicked (active state). |
| add | Dashed add button clicked (available state). |