Feature

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 Feature component is a content group containing a text component and a media element (image, inline SVG, video or iframe).

You can use the .col-- utility classes to decide if/when the two feature items should separate in different columns.

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

If you're using an iframe, make sure to add the .feature__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="feature__iframe-wrapper">
    <iframe src="assets/iframe-name" frameborder="0"></iframe>
</figure>

If you want to center the content of the feature item horizontally, use the .feature__item--center-x modifier. While the .feature__item--max-width- modifiers allow you to set a max-width.

The .feature-group--auto-invert demo example is a grid where the order of the feature items is automatically inverted on the even(2n) sections. If you wish to invert the order of a specific feature, please use one of the .feature--invert- utility classes.

Changelog

Bug Report & Feedback

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

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news