Images

Pretty pictures, and responsive, too! Also featuring titles and captions. A "max-width" is set on the parent "image" container to ensure that any image-related text doesn't pass the image edges and some CSS is used to set a reasonable baseline for the appearance of images, margins, titles, and captions. Additional image layout (e.g., different margins, padding, border, etc.) should be set by the design CSS, not the core.

Images can also be configured to display as the background of their parent container.

Alternate Text Goes Here
This image has some custom styles but no alignment or caption.
Alternate Text Goes Here
This image has a custom border width and border color.

Because it has a custom border width, there's no border-related class added to the IMG tag. Therefore, all of the border attributes -- width, style, and color -- need to be specified in the "style" attribute.

Alternate Text Goes Here
This is a centered image.

This is the image caption. Seamlessly empower multifunctional meta-services after cost effective e-tailers. Objectively fashion an expanded array of total linkage before vertical channels

Seamlessly empower multifunctional meta-services after cost effective e-tailers. Objectively fashion an expanded array of total linkage before vertical channels. Continually implement professional e-business through market positioning materials.

Alternate Text Goes Here
This is the image title. The image is floating left.

This is the image caption. Seamlessly empower multifunctional meta-services after cost effective e-tailers. Objectively fashion an expanded array of total linkage before vertical channels

Continually implement professional e-business through market positioning materials.

Distinctively provide access to holistic networks whereas competitive niche markets. Appropriately re-engineer visionary catalysts for change rather than functionalized methodologies. Appropriately productize clicks-and-mortar results without user friendly vortals.

Synergistically matrix customized functionalities without 2.0 human capital. Objectively engage end-to-end information whereas proactive architectures. Quickly productize standardized leadership skills for client-focused supply chains.

Progressively extend distinctive collaboration and idea-sharing rather than high-quality systems. Dramatically supply business sources after worldwide expertise. Holisticly embrace innovative leadership skills before client-centric infomediaries.

Distinctively provide access to dynamic leadership rather than progressive interfaces. Appropriately extend cross functional best practices via excellent testing procedures. Enthusiastically pontificate out-of-the-box niche markets before value-added leadership skills.

Dynamically synthesize intuitive bandwidth vis-a-vis high standards in "outside the box" thinking. Progressively revolutionize visionary imperatives after leading-edge leadership skills. Completely architect cooperative mindshare for low-risk high-yield products.

Assertively productize revolutionary portals through enterprise-wide leadership skills. Enthusiastically customize flexible markets via frictionless niche markets. Holisticly reinvent plug-and-play sources with backend infrastructures.

Alternate Text Goes Here

Holisticly fabricate visionary channels without resource maximizing models. Competently visualize accurate functionalities with interdependent innovation. Interactively network equity invested "outside the box" thinking rather than ubiquitous systems.

Globally orchestrate world-class synergy for interactive "outside the box" thinking. Authoritatively foster integrated growth strategies through parallel internal or "organic" sources. Seamlessly build extensible ROI for mission-critical materials.

Competently unleash timely scenarios whereas vertical products. Conveniently repurpose timely infomediaries without one-to-one leadership skills. Energistically productize best-of-breed potentialities before world-class resources.

Globally initiate resource sucking infomediaries whereas superior e-commerce. Completely evisculate timely leadership skills whereas flexible action items. Progressively foster extensive paradigms before best-of-breed outsourcing.

Professionally productivate customer directed services through client-based ROI. Globally negotiate extensible imperatives after interdependent relationships. Energistically exploit superior e-commerce vis-a-vis prospective results.

Proactively harness leveraged e-services with premium vortals. Energistically streamline sustainable schemas without functional niches. Collaboratively formulate extensive "outside the box" thinking whereas clicks-and-mortar architectures.

Quickly visualize extensible process improvements after vertical portals. Competently iterate an expanded array of web-readiness through intuitive core competencies. Appropriately mesh exceptional schemas via 2.0 ideas.

Quickly optimize customized networks with quality best practices. Assertively redefine installed base process improvements for collaborative action items. 

<div class="content-image image" id="content_XXX" style="max-width: XXXpx;">

    <img width="XXX" height="YYY"
        alt="[Alternate Text Goes Here]"
        srcset=""
        src="path/to/foo.jpg"
        aria-labelledby="content_XXX_title"
        aria-describedby="content_XXX_caption"
        itemprop="image">
    
    <div class="image__text">
    
        <div class="image-text__title" id="content_XXX_title">
            [Image Title Goes Here]
        </div>
        
        <div class="image-text__caption" id="content_XXX_caption">
            [Image caption goes here...]
        </div>
        
    </div>
    
</div>

Class Reference

Class Info
image Primary container. Should be added to a div. The max-width should be set via the "style" attribute.
content-image Primary container. Helps differentiate content type images from images in other content types (e.g., collections).
image--is-background If added to an "image" div, then the image will be set as the background of the "image" div's immediate parent container.
image__text Denotes the text associated with the image. Should be added to a div.
image-text__title Denotes the image's title. Should be added to a h5.
image-text__caption Denotes the image's caption. Should be added to a div.