Components

Security

Domain-specific components for displaying security policies, compliance metrics, and threat indicators.

SecurityDataFlowVisual data-flow indicator showing data types as tagged pills with connecting lines and arrow. Renders inline for use in table cells.
SecurityPolicyCardPolicy status card showing compliance metrics, violation counts, and flow stats with sparklines. Green border for compliant (cool), red for active violations (hot).
SecurityPolicyHeaderPolicy detail-page header: a PolicySkin identity card (name, version, description, metadata) beside a stats row of Flows Governed, Compliance, and Violations metrics with sparklines.
SecurityPolicyRibbonCorner ribbon badge SVG — a colored circle with checkmark and hanging tail. State selects the palette: green (cool), amber (warm), grey (tepid), red (hot), or surface-toned with stroke (white-list).
SecurityPolicySkinVisual wrapper providing the policy card treatment: colored border, rounded corners, shadow, and ribbon badge. Use as a shell around any card content that needs the policy visual language.
SecuritySeverityDisplays a severity level as a colored circle and text label (crit!, high, medium, low).
SecuritySeverityTagSeverity pill on the ComplianceTag chassis — no icon, severity palette. The canonical tag-scale severity ladder: critical is the only solid fill (rank by intensity, not a fifth hue), high is error outline, medium warning outline, low muted grey. Label defaults to the severity word; override via the default slot.
SecurityViolationsTableSortable violations table with Source, Dataflow, Destination, Violation, and Time columns. Uses UxTableList internally with SecurityDataFlow for the data-type column.
SecurityDataFlow
SecurityPolicyCard
SecurityPolicyHeader
SecurityPolicyRibbon
SecurityPolicySkin
SecuritySeverity
SecuritySeverityTag
SecurityViolationsTable

Qpoint Brand Style Guide