Foundation Components
Avatar
components/Avatar.vue — Circular avatar with initials derived from first/last name. Background color is dynamically assigned via a hash of the full name. Used in 5 files: profile page, app bar, main nav, site header, and foundation showcase.
| Prop | Type | Description |
|---|---|---|
firstName | String | null | First name (falls back to user store) |
lastName | String | null | Last name (falls back to user store) |
customClass | String | Additional CSS class (e.g. nav__avatar) |
With explicit names
<avatar first-name="Alice" last-name="Smith" /> — Color assigned by name hash. Used in foundation showcase.
In profile page (with status badge)
<avatar /> inside a .profile__image container (80x60px). No props — reads from user store. Warning icon overlay when signature quality is missing.
In app bar navigation
<avatar custom-class="nav__avatar" /> — Uses .nav__avatar class for smaller font size. Sits inside a menu trigger button with a dropdown arrow.
In main nav drawer
<avatar /> wrapped in <v-avatar> inside a list item. The .v-avatar container has overflow: visible so the status icon can overlap.
In site header (conditional)
<avatar v-else /> in personal context, <avatar-business /> in business context. Both wrapped in .avatar-btn (a text-type SkrButton). AvatarBusiness uses border-radius: 3px instead of 50%.
Color palette
10 avatar colors defined in _skribble-vars.sass. Color is selected by hashing the user's full name.
DetailListRow
components/DetailListRow.vue — Row with icon, header, text, and action slot. Used for detail displays and settings entries. 12 usages.
Callouts
components/Callouts.vue — Orange info box with icon, title, and item list with show more. 10+ usages.
- AES for Business
- Visual Signature
- API Integration
- Custom Branding
- Batch Signing
- Valid ID document
- Webcam access
ProgressBar
components/ProgressBar.vue — Linear progress with color variants. Used for billing usage, identification progress. 8 usages.
Blue (75%)
Green (100%)
Red (90%)
Purple (50%)
Grey (30%)
Grey Dark (60%)
Tall (height=20, 45%)
ProgressSteps
components/ProgressSteps.vue — Step indicator showing wizard progress. Used in signup and identification flows. 4 usages.
SkrContextMenu
components/SkrContextMenu.vue — Context menu with icon + label items. Color variants per item. Used for table row actions. 11 usages.
Default:
Dense:
BottomActionBar
components/BottomActionBar.vue — Fixed bottom bar with left/right action slots, separated by divider. Used in profile pages and signing. 8 usages. (Shown inline below instead of fixed position)