+
+ Storage
+
+ {{ value }} / {{ storageLimit }} GB
+
+
+
+
+
+
+```
+
+## Architecture Notes
+
+1. **Context-Based State**: The root component provides context to child components using Vue's `provide/inject`
+2. **Automatic Calculation**: The indicator width is calculated automatically based on value, min, and max
+3. **Type-Safe**: All components have proper TypeScript interfaces
+4. **Composable**: Build custom layouts by arranging components differently
+5. **Formatting**: Uses `Intl.NumberFormat` for locale-aware number formatting
+
+## Related Documentation
+
+- [UI Design System](/development/frontend/ui/) - Overall design patterns
+- [Custom UI Components](/development/frontend/ui/custom-ui-components) - Component development guide
diff --git a/development/frontend/ui/design-page-heading.mdx b/development/frontend/ui/design-page-heading.mdx
index 86ee6f9..90244be 100644
--- a/development/frontend/ui/design-page-heading.mdx
+++ b/development/frontend/ui/design-page-heading.mdx
@@ -15,10 +15,11 @@ services/frontend/src/components/ui/ds-page-heading/
## Props
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `title` | `string` | Yes | Main page title |
-| `description` | `string` | No | Short description below title |
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `string` | Yes | - | Main page title |
+| `description` | `string` | No | - | Short description below title |
+| `showBorder` | `boolean` | No | `true` | Show full-width bottom border |
## Slots
@@ -52,6 +53,17 @@ import { DsPageHeading } from '@/components/ui/ds-page-heading'
/>
```
+## Without Border
+
+Use `:show-border="false"` to disable the bottom border. This is useful when the page has its own border elements (like tabs with full-width borders):
+
+```vue
+