Text on image

The text on image pattern provides a stylized opttion to display a brief amount of content with a decorative image.

Choose a square image where the focal point of the image is on left or right side. The text should be positioned appropriately to any of the four corners and should not obscure the image’s focal point.

The pattern has a fluid width; therefore, it is recommended to limit the width of its parent container so it does not render too large. A custom responsive Bootstrap grid column class has been created for this purpose. Insert the pattern into a column with the class col-single-narrow. This column has a narrower width and is responsive based on the browser window width.

Demo

Select text position:

Select image:

Lorem ipsum dolor

Nam hendrerit velit et dictum

Consectetur adipiscing elit. Phasellus vestibulum ex ex, sed sodales massa eleifend vitae.

Code


<div class="row">
    <div class="col-single-narrow">
        <div class="cui text-on-image">
            <div class="comp-media">
                <div class="background-image ratio-1x1" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
            </div>
            <!-- Select one of the 4 positioning classes to position the content. -->
            <div class="comp-body {{ top-left | top-right | bottom-left | bottom-right }}">
                <span class="context-title">{{ Context title }}</span>
                <h2 class="title">{{ Title }}</h2>
                <p>{{ Content }}</p>
            </div>
        </div>
    </div>
</div>

Usage

General guidelines

The pattern has a fluid width; therefore, it is recommended to limit the width of its parent container so it does not render too large.

Please DO

Do limit the width of the pattern so it does not render too large on the page. e.g. place it inside of a grid column.

Please DON'T

Do not place the pattern in the main content area without limiting the width. If the width is not limited, the pattern will render too large and will not fit the screen.

Background image template

A background image template is available to guide the placement of the image’s focal point. This ensures the image is displayed properly when the pattern is viewed across various screen sizes.

Background image template files are available upon request.

Information This site is moving

Note