<svg aria-labelledby="photo-in-frame" class="Frame Frame-greenTeal  h-auto mw-100p" viewBox="0 0 520 460" width="520" height="460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title id="photo-in-frame">Photo in Frame</title>
  <defs>
    <linearGradient id="Frame-gradient" x1="55" x2="359" y1="97" y2="97" gradientUnits="userSpaceOnUse">
      <stop offset="0" class="Frame-gradientStop1"/>
      <stop offset=".5" class="Frame-gradientStop2"/>
      <stop offset="1" class="Frame-gradientStop3"/>
    </linearGradient>
    <clipPath id="Frame-clip">
      <path d="M72.9 499.7l482-48.2V40.4l-482 48.2z"/>
    </clipPath>
  </defs>

  <image width="480" height="460" x="75" y="41" clip-path="url(#Frame-clip)" transform="matrix(1 0 0 1 -54 -40)" xlink:href="http://media.sproutsocial.com/uploads/image-agency@2x-80.jpg"/>
  

  <path id="d" fill="url(#Frame-gradient)" d="M1 94.3V49.6l303-29.8v45z"/>
  <use width="100%" height="100%" transform="translate(215 363)" xlink:href="#d"/>
</svg>
<svg 
  aria-labelledby="{{titleid}}"
  class="Frame {{modifier}} {{#if shadow}}Image--shadow{{/if}} h-auto mw-100p" 
  viewBox="0 0 520 460"
  width="520" height="460" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
>
  <title id="{{titleid}}">{{title}}</title>
  <defs>
    <linearGradient id="Frame-gradient" x1="55" x2="359" y1="97" y2="97" gradientUnits="userSpaceOnUse">
      <stop offset="0" class="Frame-gradientStop1"/>
      <stop offset=".5" class="Frame-gradientStop2"/>
      <stop offset="1" class="Frame-gradientStop3"/>
    </linearGradient>
    <clipPath id="Frame-clip">
      <path d="M72.9 499.7l482-48.2V40.4l-482 48.2z"/>
    </clipPath>
  </defs>

  <image width="480" height="460" x="75" y="41" clip-path="url(#Frame-clip)" transform="matrix(1 0 0 1 -54 -40)" xlink:href="{{src}}"/>
  
  {{#if playbutton}}
    <g class="lift">
      <circle class="c--link"  fill="currentColor" cx="272" cy="231" r="39"opacity=".8"/>
      <path class="c--neutral-0" fill="currentColor" d="M262.6 243.9l24.8-12.4-24.8-12.5z" opacity=".8"/>
    </g>
  {{/if}}

  <path id="d" fill="url(#Frame-gradient)" d="M1 94.3V49.6l303-29.8v45z"/>
  <use width="100%" height="100%" transform="translate(215 363)" xlink:href="#d"/>
</svg>
{
  "id": "Frame",
  "modifier": "Frame-greenTeal",
  "playbutton": null,
  "shadow": null,
  "src": "http://media.sproutsocial.com/uploads/image-agency@2x-80.jpg",
  "title": "Photo in Frame",
  "titleid": "photo-in-frame"
}
  • Content:
    import React from 'react';
    import PropTypes from 'prop-types';
    import cx from 'classnames';
    
    const Frame = (props) => {
        return(
            <svg 
                id={props.id}
                className={cx(
                    'Frame', 
                    'h-auto',
                    'mw-100p',
                    { 'Image--shadow': props.shadow }
                )}
                xmlns='http://www.w3.org/2000/svg' 
                xmlnXlink='http://www.w3.org/1999/xlink'
                viewBox='0 0 520 460'
                width='520' height='460'
                aria-labelledby={props.titleid}
            >
                <title id={props.titleid}>{props.title}</title>
                <defs>
                    <linearGradient id='Frame-gradient' x1='55' x2='359' y1='97' y2='97' gradientUnits='userSpaceOnUse'>
                        <stop offset='0' className='Frame-gradientStop1'/>
                        <stop offset='.5' className='Frame-gradientStop2'/>
                        <stop offset='1' className='Frame-gradientStop3'/>
                    </linearGradient>
                    <clipPath id='Frame-clip'>
                        <path d='M72.9 499.7l482-48.2V40.4l-482 48.2z'/>
                    </clipPath>
                </defs>
                <image width='480' height='460' x='75' y='41' clipPath='url(#Frame-clip)' xlinkHref={props.src}/>
                { (props.playbutton) ? <g className='lift'><circle className='c--link'  fill='currentColor' cx='272' cy='231' r='39'opacity='.8'/><path className='c--neutral-0' fill='currentColor' d='M262.6 243.9l24.8-12.4-24.8-12.5z' opacity='.8'/></g> : null }
                
                <path id='d' fill='url(#Frame-gradient)' d='M1 94.3V49.6l303-29.8v45z'/>
                <use width='100%' height='100%' transform='translate(215 363)' xlinkHref='#d'/>
            </svg>
        );
    };
    
    Frame.propTypes = {
        id: PropTypes.string,
        modifier: PropTypes.string,
        playbutton:  PropTypes.bool,
        shadow: PropTypes.bool,
        src: PropTypes.string,
        title: PropTypes.string,
        titleid: PropTypes.string
    };
    
    export default Frame;
    
  • URL: /components/raw/frame/Frame.jsx
  • Filesystem Path: components/molecules/Frame/Frame.jsx
  • Size: 2 KB
  • Content:
    .Frame-purpleMagenta {
        // Purple ~ Magenta
        .Frame-gradientStop1 {
            stop-color: get-color(purple, 400);
        }
        .Frame-gradientStop2 {
            stop-color: get-color(purple, 600);
        }
        .Frame-gradientStop3 {
            stop-color: get-color(magenta, 800);
        }
    }
    .Frame-tealAqua {
        // Teal ~ Aqua
        .Frame-gradientStop1 {
            stop-color: get-color(teal, 300);
        }
        .Frame-gradientStop2 {
            stop-color: get-color(aqua, 500);
        }
        .Frame-gradientStop3 {
            stop-color: get-color(aqua, 800);
        }
    }
    .Frame-greenTeal {
        // Green ~ Teal
        .Frame-gradientStop1 {
            stop-color: get-color(green, 300);
        }
        .Frame-gradientStop2 {
            stop-color: get-color(teal, 500);
        }
        .Frame-gradientStop3 {
            stop-color: get-color(teal, 800);
        }
    }
    .Frame-bluePurple {
        // Blue ~ Purple
        .Frame-gradientStop1 {
            stop-color: get-color(blue, 400);
        }
        .Frame-gradientStop2 {
            stop-color: get-color(purple, 600);
        }
        .Frame-gradientStop3 {
            stop-color: get-color(purple, 800);
        }
    }
    .Frame-bambu {
        // Bambu
        .Frame-gradientStop1 {
            stop-color: get-color(bambuTeal, 400);
        }
        .Frame-gradientStop2 {
            stop-color: get-color(bambuTeal, 500);
        }
        .Frame-gradientStop3 {
            stop-color: get-color(bambuTeal, 500);
        }
    }
    
  • URL: /components/raw/frame/Frame.scss
  • Filesystem Path: components/molecules/Frame/Frame.scss
  • Size: 1.4 KB

Frame

The Frame is a wrapper for an image, that adds a clipping path and some fancy gradients around it.

Best Practices

  • This component has an image and doesn’t lazy load, so put it above the fold if possible.
  • Always fill out the title and titleid

Accessibility

As long as the person adds the title + titleid, we should be all good.