Image Wrapper

The image-wrapper component provides standardized layouts for integrating images with text, supporting floating alignments for editorial flow and full-width containers for large visuals.

WARNING

Check if this is deprecated // update class names

Floating Images

Floating images allow text to wrap around the media content. This is ideal for editorial content where visual context is required alongside lengthy descriptions.

I'm a cool image, casually floating on the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?

I'm a cool image, casually floating on the right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?

Alignment Modifiers

Modifier	Description	Layout Behavior
.-left	Float Left	Image sits on the left; text wraps to the right.
.-right	Float Right	Image sits on the right; text wraps to the left.

---

Full-width Images

The full-width variant breaks the text flow to present a large image across the entire container width, with the text appearing below.

I'm a cool fullwidth image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque autem consequatur expedita libero odit, vero? Alias commodi delectus dolore expedita magni, necessitatibus numquam perferendis quidem quo repudiandae voluptates?

Modifier	Description	Layout Behavior
.-fullwidth	100% Width	Image spans the container; text is pushed below.

---

Component Structure

To implement these layouts, use the following HTML structure:

<div class="image-wrapper">
    <div class="image-wrapper__image -left">
        <img src="path/to/image.jpg" alt="Description" />
        <div class="image-wrapper__caption">Caption text here</div>
    </div>
    <div class="image-wrapper__text">
        <p>Main content paragraphs...</p>
    </div>
</div>

<div class="image-wrapper">
    <div class="image-wrapper__image -fullwidth">
        <img src="path/to/wide-image.jpg" alt="Hero" />
        <div class="image-wrapper__caption">Full-width caption</div>
    </div>
    <div class="image-wrapper__text">
        <p>Content appearing below the image...</p>
    </div>
</div>