Default Hero — Side Image Right
A two-column hero with the image on the right.
An asymmetric grid (42/58 on desktop) places the content column on the left and a full-bleed media column on the right that breaks past the container edge. The triangle pseudo-element on the figure provides the signature visual transition between the two columns.
Primary Button
Flipped Hero — Side Image Left
The mirrored variant — image left, content right.
Same asymmetric grid pattern (now 58/42), but flipped. The content column sits on the right and the media column breaks left past the container edge. The triangle pseudo-element points right-to-left to mirror the visual direction.
Primary Button