Skip to main content
Skip to main content

Web Style Guidelines
and Resources

Strata - Version Three

Images, Figures and Videos

Strata Three utilizes a selection of pre-defined image ratios with focus given to a preferred subset.

Ratios

The 3:2 and 16:9 full-frame dimensions are preferred for most landscape oriented images. Featured images may work best with the 3:1 ratio. Portraits with a 4:5 or 1:1 ratio are recommended. Figures and captions work well using a 5:4 approach.

Preferred Ratios: 1:1, 3:1, 3:2, 4:5, 5:4, 16:9

4:5 1:1 5:4 3:2 16:9 3:1

Other Ratios: 2:1, 2:3, 3:4, 4:1, 4:3, 5:7, 7:5

2:3 5:7 3:4 4:3 7:5 2:1 4:1

Examples

The following examples are displayed at the full width of the container on sm, md, and lg sizes.


Two-Up Display With Captions Below

3:2

This is a .caption for the 3:2 ratio image.

3:2

This is a .caption for the 3:2 ratio image.


Figures With Side Captions

5:4

This is a .caption for the 5:4 ratio image with an additional .caption-side class.

Use a .caption-flip classe to move text flush right.


Gallery Option: Landscapes

3:2

Lorum Ipsum

3:2

Lorum Ipsum

3:2

Lorum Ipsum


Gallery Option: Portraits

Nobis diam autem cui suscipere.

Blandit hos oppeto amet. Ideo ex odio luptatum defui. Abigo veniam pala volutpat quadrum velit in vulpes enim indoles aptent. Blandit hos oppeto amet. Ideo ex odio luptatum defui. Abigo veniam pala volutpat quadrum velit in vulpes enim indoles aptent.

4:5

Lorum Ipsum

4:5

Lorum Ipsum

4:5

Lorum Ipsum


Gallery Option: 6-UP (md, lg) / 2-UP (xs, sm)

1:1
1:1
1:1
1:1
1:1
1:1

Videos

Wrap videos within a .video container to enable a responsive embed.

/* Example automatic jQuery wrapper */
( function( $ ) {
	$("iframe[src^='https://www.youtube.com']").wrap( '<div class="video">');
} )( jQuery );

The .video wrapper can be found within /_/s3/css/extend/features(.min).css