Card header
The top row of a dashboard card: a title and its supporting line, with a menu, an icon and a button, an avatar and a status, or a period switcher.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
EnglishMirroredArabic
DesktopMobile
LTR →
Installation
Add the block
npx ritla add card-headerAlso works with shadcn:
npx shadcn@latest add @ritla/card-header
Arabic and RTL notes
Mirrors
- The title starts on the right; the menu, button or switcher sits on the left.
- The switcher's first period (Day) is the rightmost.
Does not mirror
- The icons and the three-dot menu glyph stay as drawn.
- Numerals
- Counts and years in the supporting line follow the numerals setting.