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.Some 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 3:2 or 5:4.
Preferred Ratios: 1:1, 3:1, 3:2, 4:5, 5:4, 16:9
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
This is a .caption for the 3:2 ratio image.
This is a .caption for the 3:2 ratio image.
Figures With Side Captions
This is a .caption for the 5:4 ratio image with an additional .caption-side class.
Use a .caption-flip class to move text flush right.
Gallery Option: Landscapes
Lorum Ipsum
Lorum Ipsum
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.
Lorum Ipsum
Lorum Ipsum
Lorum Ipsum
Gallery Option: 6-UP (md, lg) / 2-UP (xs, sm)
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 );