Media background variations

This page shows how you can use the Media Background row as a starting point for a variety of content structures. The Media Background row is a structural row that can place any content on top of an image or video.

Text box

This is a simple text box with a transparent background style on a Media Background.

Card over media background

Button

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac pretium lorem. Fusce libero nulla, ornare eget mi id, auctor pharetra sem. Nulla libero erat, viverra sit amet lectus ac, venenatis consectetur arcu. Nullam sit amet ligula ullamcorper, consequat sapien vitae, ultricies leo. Nullam ligula sapien, posuere vitae quam a, consectetur elementum nibh. In hac habitasse platea dictumst.

Dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac pretium lorem. Nullam sit amet ligula ullamcorper, consequat sapien vitae, ultricies leo. Nullam ligula sapien, posuere vitae quam a, consectetur elementum nibh. In hac habitasse platea dictumst. Morbi elementum ornare elementum. Donec eget vehicula tortor, ac consectetur orci. Ut non finibus mi. Maecenas et sagittis ex. Ut pulvinar sed augue vitae dictum. Aenean pellentesque a felis sit amet dapibus.

Nullam ligula sapien

Nulla libero erat, viverra sit amet lectus ac, venenatis consectetur arcu. Nullam sit amet ligula ullamcorper, consequat sapien vitae, ultricies leo. Nullam ligula sapien, posuere vitae quam a, consectetur elementum nibh. In hac habitasse platea dictumst. Morbi elementum ornare elementum. Donec eget vehicula tortor, ac consectetur orci. Ut non finibus mi. Maecenas et sagittis ex. Ut pulvinar sed augue vitae dictum.

UDS Image Overlap Right

Use the custom class "image-overlap-right" or "image-overlap-left" on a media background element to convert it into this UDS content section. This example uses a card for the overlapped content, but it can be anything: accordion, view, webform, etc.

Button

1 Column Grid of text boxes
This example uses a gray background color with the "image-overlap-left" custom class. The content on top of the media background is a 1 column grid with three text boxes.

Ipsum dolor sit amet
Sit nulla libero erat, viverra sit amet lectus ac, venenatis consectetur arcu. Nullam sit amet ligula ullamcorper, consequat sapien vitae.

Ipsum vehicula sit
Donec eget vehicula tortor, ac consectetur orci. Ut non finibus mi. Maecenas et sagittis ex. Ut pulvinar sed augue vitae dictum. Aenean pellentesque a felis sit amet dapibus.