600 West

Media: Square 

<div class="Media _square" 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": "_square"
}
  • 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.