Bento section
Feature cards of different sizes on one grid, each with a product snippet that can bleed off its edge: wide and narrow, tall start, or tinted two by two.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
EnglishMirroredArabic
DesktopMobile
LTR →
Examples
Tall start
EnglishMirroredArabic
DesktopMobile
LTR →
Tinted
EnglishMirroredArabic
DesktopMobile
LTR →
Installation
Add the block
npx ritla add bento-sectionAlso works with shadcn:
npx shadcn@latest add @ritla/bento-section
Built from
The Ritla UI components this block is made of. Each is installed with it.
Arabic and RTL notes
Mirrors
- The grid starts on the right: the wide or tall card is on the right in Arabic; the supporting text sits to the left of the heading.
Does not mirror
- Amounts, card numbers and figures inside the snippets.