CSS logical properties and values demo

English عربي

Automatic CSS layout based on language direction

Using modern CSS like Flexbox, Grid and CSS logical properties and values like: margin-inline-start and margin-inline-end for automatic correct alignment based on the HTML dir -attribute.

Note the placement of the container, borders and CTA-buttons in the English LTR and Arabic RTL version

Super heroes

€ 21
Superman

Superman

Amet consectetur adipisicing elit. Aut veritatis suscipit magni explicabo harum quaerat. Sunt rem sequi aliquid amet.

€ 18
Hulk

Hulk

Aut veritatis suscipit magni explicabo harum quaerat. Sunt rem sequi aliquid amet.

€ 20
Thor

Thor

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut veritatis suscipit magni explicabo harum quaerat. Sunt rem sequi aliquid amet.

€ 15
Ironman

Ironman

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut veritatis suscipit magni explicabo harum quaerat. Sunt rem sequi aliquid amet.

€ 28
Wonderwoman

Wonderwoman

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut veritatis suscipit magni explicabo harum quaerat. Sunt rem sequi aliquid amet.