Text + Media

Content group containing Text + Media.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Text + Media component is a content group containing a text component and a media element (image, inline SVG, video or iframe).

On bigger screens, the 2 content blocks (img and media) are split into 2 columns. The class .text-media--invert can be used to reverse the order of the 2 blocks. If you wish to lay the content in a single column at all media queries (so that both text and media takes the whole horizontal available space), you can use the .text-media--col-1 class.

The media supported are <img>, <svg>, <video> and <iframe> elements.

If you're using an iframe, make sure to add the .text-media__iframe-wrapper class to the <figure> element.

If you're using an inline SVG, make sure to include the width, height, viewbox and preserveAspectRatio attribute.

<!-- img -->
<figure>
  <img src="assets/img-name.png" alt="Image Name">
</figure>

<!-- video -->
<figure>
  <video poster="assets/video-name-poster.jpg" src="assets/video-name.mp4"></video>
</figure>

<!-- inline SVG -->
<figure>
  <svg width="620" height="420" viewBox="0 0 620 420" preserveAspectRatio="xMinYMin slice">
    <!-- svg code -->
  </svg>
</figure>

<!-- iframe -->
<figure class="text-media__iframe-wrapper">
    <iframe src="assets/iframe-name" frameborder="0"></iframe>
</figure>

⚠️ Note: this component's layout is based on CSS Grid. We use the @supports feature query in CSS to target browsers that support CSS Grid and set the layout configuration. In browsers that don't support CSS Grid, the component remains accessible, but the layout is different: elements are stacked one on top of the other.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.