Card: Media

[data-type="media"]

Playground [ card__media ]

Cards with various caption instances

Image alt

Caption Text

Subtext (default position)

Image alt 2

Caption Text

Caption sub .caption-above

Image alt 3

Caption Text

Subtext - stacked

Image alt 4
Caption Text - without Subtext

Note: The [ group ] above has all images set to .aspect-landscape

Media [ card ]

Examples with caption instances using Links

Image alt

Linked Caption

Subtext (default position)

Image alt 2

Linked Caption

Subtext - using .caption-above

Image alt 3

Linked Caption

Subtext - stacked

Image alt 4
Caption Link: Caption Title only (stacked)

Note: The [ group ] above has images set to .aspect-square

Media [ card ]

Examples with caption instances using .shadow, .inner-shadow and .border

Image alt

With Shadow 5

Subtext (default position)

Image alt 2

Linked Caption

Subtext - using .caption-above

Image alt 3

Linked Caption

Subtext - stacked

Image alt 4
Caption Link: Caption Title only (stacked)

Note: The [ group ] above has images set to .aspect-square

Media [ card ] (Playground)

Different settings on [ group ] and [ card ] to test robustness

[ caption-stacked ] [ ec ]

Consectetur adipiscing elit

[ caption-above ]

Ut enim ad minim
[ ss ]
[ caption-stacked ]

Jane Doe

Job

[ caption-above ]

Something to say?