SecurityPolicySkin
components/security/PolicySkin.vue
Visual 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.
Sample Card
Custom content goes herePolicySkin provides the visual wrapper — border color, shadow, rounded corners, and ribbon badge. Use it to build any card that needs the policy visual language.
cool
state="cool"
hot
state="hot"
warm
state="warm"
default
state="default"
white-list
state="white-list"
No Ribbon
:ribbon="false"
components/security/PolicySkin.vue
Usage
<SecurityPolicySkin
state = "cool"
maxWidth = "350px"
:ribbon = "true"
>
Content here
</SecurityPolicySkin>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | String | 'cool' | 'cool' (green) | 'hot' (red) | 'warm' (amber) | 'default' (purple) | 'white-list' (light blue) — drives border color and ribbon |
| maxWidth | String | '350px' | CSS max-width for the card shell |
| ribbon | Boolean | true | Show/hide the corner ribbon badge |
Slots
| Slot | Description |
|---|---|
| default | Card body content — rendered inside the bordered, shadowed container |