<div class="Media Media--16x9" style="">

    <img id="" class="image  " alt="Create an Exceptional Brand Experience On Social" style="" srcset="//media.sproutsocial.com/uploads/localization/en/smart-inbox-apply-tags.png, //media.sproutsocial.com/uploads/localization/en/smart-inbox-apply-tags@2x.png 2x"
    />

</div>
<div class="Media {{modifier}}" style="{{style}}">
    {{> @children}}
</div>
{
  "style": null,
  "children": [
    {
      "component": "image",
      "context": {
        "alt": "Create an Exceptional Brand Experience On Social",
        "src": "//media.sproutsocial.com/uploads/localization/en/smart-inbox-apply-tags.png",
        "src2x": "//media.sproutsocial.com/uploads/localization/en/smart-inbox-apply-tags@2x.png"
      }
    }
  ],
  "modifier": "Media--16x9"
}
  • Content:
    const React = require('react');
    const cx = require('classnames');
    const render = require('../../../helpers/render').render;
    
    const Media = (props) => {
        return (
            <div
                className={cx('Media', props.modifier)}
            >
                {render(props.children)}
            </div>
        )
    };
    
    module.exports = Media;
    
  • URL: /components/raw/media/Media.jsx
  • Filesystem Path: components/molecules/Media/Media.jsx
  • Size: 326 Bytes
  • Content:
    .Media {
        position: relative;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .Media._letterbox,
    .Media--letterbox {
        background-color: black;
    }
    .Media > * {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        font-family: "object-fit: cover;", $font-family-base; // needed for IE object-fit polyfill
    }
    .Media._contain > *,
    .Media--contain > * {
        object-fit: contain;
        font-family: "object-fit: contain;", $font-family-base; // needed for IE object-fit polyfill
    }
    .Media {
        &::after,
        &._1x1::after,
        &._square::after {
            display: block;
            padding-bottom: 100%;
            content: "";
        }
        &._16x9::after,
        &--16x9::after {
            padding-bottom: 56.25%;
        }
        &._4x3::after,
        &--4x3::after {
            padding-bottom: 75%;
        }
        &._3x4::after,
        &--3x4::after {
            padding-bottom: 133.33333333%;
        }
        &--2x1::after {
            padding-bottom: 47.46%;
        }
    }
    .Media-overlay {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        * {
            color: get-color(neutral, 0);
        }
    }
    
  • URL: /components/raw/media/Media.scss
  • Filesystem Path: components/molecules/Media/Media.scss
  • Size: 1.3 KB

There are no notes for this item.