Text on image
Text-only content can be visually overwhelming and make sections difficult to scan. Users whose native language isn't English may also have trouble understanding text-only content. If users have trouble finding or understanding your content, they may be unable to complete tasks.
The text on image component helps to visually separate, draw attention to and distinguish chunks of content on a page. It adds visual interest, sets the tone of a site and helps with storytelling. The text should always have a solid or mostly solid background to support contrast between the image and text.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Media
Demo
Configure: select the dropdowns below to display the variety of options that a text on image supports.
Usage best practices
The text on image component is responsive. The image width adapts to the column size and all the content will stack on smaller screen sizes. Body text allows standard formatting such as bolding and italics, links as well as lists. One primary call to action button is available per component instance.
For a different layout/format with a similar effect, see content block.
Consider using text on image to:
- highlight a call to action at a lower point on a page
- provide visual interest for specific content
Usage examples:
- linking to subpages from a landing page
- promoting a program, event
- separating steps in a process
- adding a caption or quote on a photo
Do
Limit the width of the image using a grid column so that the image isn't too large.
Choose images that convey information.
Ensure the images focal point is not covered by text.
Don't
Do not use images where people are centered in the frame. Human subjects should either be right aligned or left aligned so they don't get cut off by the text block.
Do not cover the image with copious amounts of text.
Do not make the text on image as the only content on the page.