Graphic

What course would be complete without a Graphic or two? Graphics components in Adapt are “swap-responsive” — that is, a large graphic is loaded on desktop browsers with the option to “swap” that for a smaller, lighter graphic on mobile devices.

Graphics can be nearly anything you want. There are only a few concerns to be aware of when choosing a graphic:

• Avoid text in the graphic
  Text in the graphic is generally considered bad form, accessibly speaking. Consider that the image will be scaled on various devices, potentially rendering your text unreadable.
• Images are width constrained.
  While images can be of any height, images need to fill the width graphic area or they look broken or unprofessional.

The Graphic component inherits all the settings common to the Presentation Components.

The alternative text for the image.

The large sized image for desktop devices.

The small sized image for mobile devices.

An optional field for providing attribution for the image when the license requires.

As mentioned previously, Graphics are width-contstrained — that means that you need only concern yourself with the width of the image. The height can be anything you want. Because of this, we do not provide templates for the images.

In all cases, a larger graphic will be scaled down to fit the available area, maintaining its aspect ratio.

When a graphic is full-width, each of the graphics has a minimum width that should be observed:

• The Large image should be 984px wide.
• The Small image should be 682px wide.

When a graphic is on the left or right, each of the graphics has a minimum width that should be observed:

• The Large image should be 682px wide.
• The Small image should be 448px wide.