°ÅÀÖÊÓƵ

Snippet Callout

The current snippet

Images are cutoff on smaller viewports.

Body text is not vertically centered in horizontal view.

 

AssetCallout-testing

A quick and dirty solution

The image is now an <img> tag, so fixes the truncating issues seen in the original snippet. 

Added padding around the image as a solution to the extra space that occurs when the asset reaches  < 1250px.

Asset switches to vertical layout above tablet, which is too soon. 

This is a good solution for images that have text. In the other solutions outlined here, the text in the img will be cut off. 

 

 

New Callout Flex Solution

A custom component - built with Flexbox

Text is vertically centered in horizontal view.

Images have a min-width of 225px and instructed to fill a percentage of the viewport height at all screensizes. 

The layout stays horizontal until 545px to maintain that it is highlighting content from another page. 

Minamum image sizes are 500x500, with a range up to 800x800. Anything bigger will need processing, smaller will be lower res. 

Accepts a body description between 50 -75 words. This can be longer, however this callout is meant to deliver information quickly, at a glance. Anything longer at small viewports makes it feel like a section, not a highlight of information.  

The original snippet using the content below for reference.

 

 

New Callout Grid Solution

A custom component - built with Grid

All the same features as the Flexbox component, but with less CSS.

The original snippet using the content below for reference.