VOM Style Guide §7.3. Geometry is fixed by the guide — radius 12px, 0.5px hairline border, shadow-sm, 24px padding — and is not overridable per instance.
Plain header, the default. Title 17px/600, subtitle 12px neutral.
Banner header in brand teal. Title 15px/600, icon and text on white.
Banner with a subtitle.
No title and no header slot, so no header is rendered — just a padded surface.
Actions sit at the inline-end of the header and never scroll away.
Actions also work on the banner header.
| التاريخ | الوصف | المبلغ |
|---|---|---|
| 2026-09-01 | فاتورة مبيعات | 1,250.00 |
| 2026-09-04 | سند قبض | 800.00 |
| التاريخ | المبلغ |
|---|---|
| 2026-09-01 | 1,250.00 |
A plain header above a flush body gets a 1px rule, because there is no whitespace left to separate them. A banner header supplies its own separation, so no rule is drawn.
Footer actions align to the inline-end above a 1px rule.
| سطر أول |
| سطر ثانٍ |
elevation="raised" — the default, shadow-sm.
elevation="flat" — border kept, shadow dropped.
| لا تتراكم الظلال |
Expanded by default. The header is a button with aria-expanded.
Collapsed by default via :default-expanded="false".
Collapsible with a banner header.
For controlled state, pair the expanded prop with the sync modifier:
<base-card collapsible :expanded.sync="isOpen" title="..."></base-card>
Overlay covers the body; the header stays readable.
Root carries aria-busy.
With loading-label, announced via role="status".
href renders an anchor. Hover lifts to shadow-md; Tab shows the focus ring.
Without href, it becomes role="button" with tabindex and Enter/Space.
Disabled: surface background, muted text, not-allowed, pointer-events none.
Padding and the chevron are direction-agnostic.
Same component, LTR container.
Tokenized overlay — ESC, backdrop, focus restore. No Bootstrap / jQuery.
Use v-model for open state.
Opens a fiscal-style confirm with Cancel / Continue actions.
تاريخ الإصدار قبل بداية السنة المالية. هل تريد المتابعة؟