Cards

Cards provide an abstraction layer for promos - the focus here is on handling how the body content is arranged in relation to the container across mobile/desktop contexts. Cards are intentionally agnostic about the contents of the body

Base Card

Initial rules common to all cards. By default, a landscape ratio is enforced across all breakpoints. At sm and up, body content is docked to the bottom of container, at xs and below, it simply stacks underneath.

body content can be of varying length

Landscape -> Square

Sets landscape ratio at xs, square at medium and above

body content can be of varying length

Square -> Landscape

Sets square ratio, landscape at large and above

body content can be of varying length

Portrait -> Landscape

Sets portrait ratio, landscape at large and above

body content can be of varying length

Split Right

At sizes below medium, body content is reduced to 50% and docked to the right

body content can be of varying length

Split left

At sizes below medium, body content is reduced to 50% and docked to the left

body content can be of varying length

Split Right -> Square

Same as split right above, but resolves to square instead of landscape

body content can be of varying length

Sticky

Body content is always absolutely positioned, even at smallest breakpoints (used in 3ups below)

body content can be of varying length1