SecurityPolicyRibbon
components/security/PolicyRibbon.vue
Corner 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).
All states
cool
warm
tepid
hot
white-list
In context — corner of a PolicySkin card
Compliant Policy
The skin renders the ribbon in its corner.
components/security/PolicyRibbon.vue
Usage
<SecurityPolicyRibbon
state = "cool"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | String | 'cool' | 'hot' | 'warm' | 'tepid' | 'cool' | 'white-list' — selects the badge/tail/check palette |