Branding & Style Guide

2.6 components.contentimages Main Content Area Images

Toggle example guides Toggle HTML markup

Styling and placement for responsively served images in the main content area of the site.

Example

Demonstration Content TBA

RWD Infographic Branding and Header Treatment
Markup: components/contentimages/contentimages.twig
<h2>Demonstration Content TBA</h2>
<div alt="RWD Infographic Branding and Header Treatment" data-embed-button="image" data-entity-embed-display="image:responsive_image" data-entity-embed-display-settings="main_large_banner" data-entity-type="file" data-entity-uuid="71515e63-8cd5-4590-ae7d-c54bdfed93ba" data-langcode="en" class="embedded-entity">


  <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="/sites/default/files/styles/main_large_banner_wide_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="screen and (min-width: 1220px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_normal_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="all and (min-width: 980px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_narrow_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="all and (min-width: 740px) and (max-device-width: 979px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_mobile_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" type="image/jpeg"><!--[if IE 9]></video><![endif]--><img src="/sites/default/files/styles/main_large_banner_mobile_1x/public/images/rwd-infographic_identity-headers-mlb.jpg" alt="RWD Infographic Branding and Header Treatment" typeof="foaf:Image"></div>
</picture>
</div>
Source: sass/components/contentimages/_contentimages.scss, line 1