Flex Embed
A useful pattern for keeping elements sized to a specific aspect ratio even
when their width is flexible, in particular tricky elements like <iframe>.
FlexEmbed- The root node.FlexEmbed-ratio- The element that provides the aspect ratio (1:1 by default).FlexEmbed-ratio--3by1- The modifier class for 3:1 aspect ratio embed.FlexEmbed-ratio--2by1- The modifier class for 2:1 aspect ratio embed,FlexEmbed-ratio--16by9- The modifier class for 16:9 aspect ratio embed.FlexEmbed-ratio--4by3- The modifier class for 4:3 aspect ratio embed.FlexEmbed-content- The descendent class for the content that is being displayed.
<div class="FlexEmbed ">
<div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
<iframe class="FlexEmbed-content" width="560" height="315" src="https://www.youtube.com/embed/JBgfw-B2rRs" allowfullscreen></iframe>
</div>We customize the base component with a default background-size of cover.
This allows us to use FlexEmbed as a very simple "lazy-load" image strategy,
for example in the navigation if we want images to not load until they're
visible.
This should be used sparingly as it isn't very semantic and doesn't support
responsive image techniques like srcset or sizes, but for presentation
imagery it's preferable to loading way more images than we need!
<div class="FlexEmbed">
<div class="FlexEmbed-ratio FlexEmbed-ratio--2by1"></div>
<div class="FlexEmbed-content" style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);"></div>
</div>We also allow you to nest images in FlexEmbeds. They'll automatically scale
to cover the entire embed if you add the FlexEmbed-content class.
This allows you to add alt text to images and use responsive image techniques
like srcset and sizes.
It can be useful when displaying an image sized to a specific ratio.
<div class="FlexEmbed">
<div class="FlexEmbed-ratio FlexEmbed-ratio--2by1"></div>
<img class="FlexEmbed-content" src="/images/prototypes/tcs/generator-lifestyle.jpg" alt="A Champion generator in a construction site.">
</div>We also support <iframe> elements as immediate children of
FlexEmbed-content. This violates our CSS specificity guidelines but makes
wrapping embeds in CMS content much, much easier.
Multiple FlexEmbed--content sections will be placed directly on top of one another.
By adding the FlexEmbed-content--overlay modifier, you can have a
FlexEmbed--content section obscure the content below it with a
dark transparent layer.
The FlexEmbed-content--overlay can be especially helpful when adding an
icon above a FlexEmbed.
Adding the FlexEmbed-icon class will ensure the icon is sized correctly.
You can add the additional FlexEmbed-icon--interactive modifier to add
a subtle hover effect to interactive icons.
<div class="FlexEmbed">
<div class="FlexEmbed-ratio FlexEmbed-ratio--2by1"></div>
<img class="FlexEmbed-content" src="/images/prototypes/tcs/generator-lifestyle.jpg" alt="A Champion generator in a construction site.">
<div class="FlexEmbed-content FlexEmbed-content--overlay">
<svg width="26" height="26" viewBox="0 0 512 512" class="FlexEmbed-icon FlexEmbed-icon--interactive">
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z" />
</svg>
</div>
</div>