Work

Component gallery

Intended specs are included below each example. Descriptions should match visuals when complete.

Full width image ^^^
Expand edge-to-edge in the viewport at all viewport widths / all breakpoints.

Wide width image ^^^
Match the max content width at all viewport widths / all breakpoints.
Ie: never expand edge-to-edge.
Eg: 1360 width at ≥1440 browser viewport width.


··········
[Below]
Align left/center/right – smaller images —
Match the max content width at all viewport widths / all breakpoints.
Ie: never expand edge-to-edge.
Eg: 1360 width at ≥1440 browser viewport width.

Unless…

When image dimensions of the component are set (width or height), those are max dimensions and the component aligns left, right or center to the viewport’s max content width (browser viewport width minus side the rails). This last allows us to set images to not exceed the body-text column width on desktop, for example (740), when desired, or any other value/%.

Align left, smaller image ^^^

Align center, smaller image ^^^

Align right, smaller image ^^^


··········
[Below]
Align left/center/right – large images —
Match the max content width at all viewport widths / all breakpoints.
Ie: never expand edge-to-edge.
Eg: 1360 width at ≥1440 browser viewport width.

Align left, large image ^^^

Align center, large image ^^^

Align right, large image ^^^

Full width video ^^^

Full width video (repeat) ^^^

Wide width video ^^^

Align left video ^^^

Full width image grid ^^^

Full width STACKED image grid ^^^

Wide width image grid ^^^

Wide width STACKED image grid ^^^

Full width slider with controls ^^^

Full width slider without controls ^^^

Wide width slider with controls ^^^

Wide width slider without controls ^^^

Lorem ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Some dummy

Pullquote ^^^