# Image-Text Combinations

TIP

Image-text combinations.

# Floating Images

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? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur at consequuntur culpa cupiditate delectus dolorem dolorum enim eos eveniet, harum minima nesciunt nihil perspiciatis praesentium quia quisquam rem vel?

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

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

hide code

<div class="p-xl h-bg-color-secondary">
    <p>
        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?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur at consequuntur culpa cupiditate delectus dolorem dolorum enim eos eveniet, harum minima nesciunt nihil perspiciatis praesentium quia quisquam rem vel?
    </p>
    <div class="image-wrapper">
        <div class="image-wrapper__image -left">
            <img src="https://via.placeholder.com/500x120.png" alt="floating image" />
            <div class="image-wrapper__caption">
                I'm a cool image, casually floating on the left
            </div>
        </div>
        <div class="image-wrapper__text">
            <p>
                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?
            </p>
            <p>
                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?
            </p>
        </div>
    </div>
    <div class="image-wrapper">
        <div class="image-wrapper__image -right">
            <img src="https://via.placeholder.com/600x250.png" alt="floating image" />
            <div class="image-wrapper__caption">
                I'm a cool image, casually floating on the right
            </div>
        </div>
        <div class="image-wrapper__text">
            <p>
                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?
            </p>
            <p>
                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?
            </p>
        </div>
    </div>
</div>

# Fullwith Image

I'm a cool fullwidth image

hide code

<div class="p-xl h-bg-color-secondary">
    <div class="image-wrapper">
        <div class="image-wrapper__image -fullwidth">
            <img src="https://via.placeholder.com/1000x200.png" alt="fullwidth image" />
            <div class="image-wrapper__caption">
                I'm a cool fullwidth image
            </div>
        </div>
        <div class="image-wrapper__text">
            <p>
                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?
            </p>
        </div>
    </div>
</div>

← Pharma4u Header Modal →