Showcase work examples inside of browser- and device-themed frames.
The <defs>
block should only be included once per page (additional
occurrences will reference that first set of definitions).
<div class="FlexEmbed WorkImage ">
<div class="FlexEmbed-ratio FlexEmbed-ratio--4by3"></div>
<div class="FlexEmbed-content">
<svg viewBox="0 0 922 684">
<defs>
<clipPath id="WorkImage-viewportLarge">
<path d="M3 33 L845 33 Q845 33 845 33 L845 644 Q845 653 836 653 L12 653 Q3 653 3 644 L3 33 Q3 33 3 33 Z"
/>
</clipPath>
<g id="WorkImage-frameLarge">
<rect class="WorkImage-bezel" width="848" height="656" rx="10"
/>
<circle class="WorkImage-detail" cx="17" cy="17" r="6" />
<path class="WorkImage-screen" d="M3.5 33.5 L844.5 33.5 Q844.5 33.5 844.5 33.5 L844.5 644 Q844.5 652.5 836 652.5 L12 652.5 Q3.5 652.5 3.5 644 L3.5 33.5 Q3.5 33.5 3.5 33.5 Z"
/>
</g>
<g id="WorkImage-frameSmall">
<rect class="WorkImage-bezel" width="250" height="468" rx="20"
/>
<circle class="WorkImage-detail" cx="125" cy="25" r="6" />
<rect class="WorkImage-detail WorkImage-detail--alt" x="95" y="434"
width="60" height="18" rx="9" />
<rect class="WorkImage-screen" x="3.5" y="50.5" width="243" height="367"
/>
</g>
</defs>
<g class="WorkImage-large">
<use xlink:href="#WorkImage-frameLarge" />
<image xlink:href="/images/case-studies/rfd-large.png" x="3"
y="33" width="842" height="620" preserveAspectRatio="xMidYMin slice"
clip-path="url(#WorkImage-viewportLarge)" />
</g>
<g class="WorkImage-small" transform="rotate(6 50 50)">
<use xlink:href="#WorkImage-frameSmall" x="670" y="120" />
<image xlink:href="/images/case-studies/rfd-small.png" x="673"
y="170" width="244" height="368" preserveAspectRatio="xMidYMin slice"
/>
</g>
</svg>
</div>
</div>
Use the WorkImage--tilt
modifier to display the image with a slight tilt.
<div class="FlexEmbed WorkImage WorkImage--tilt">
<div class="FlexEmbed-ratio FlexEmbed-ratio--4by3"></div>
<div class="FlexEmbed-content">
<svg viewBox="0 0 922 684">
<g class="WorkImage-large">
<use xlink:href="#WorkImage-frameLarge" />
<image xlink:href="/images/case-studies/rfd-large.png" x="3"
y="33" width="842" height="620" preserveAspectRatio="xMidYMin slice"
clip-path="url(#WorkImage-viewportLarge)" />
</g>
<g class="WorkImage-small" transform="rotate(6 50 50)">
<use xlink:href="#WorkImage-frameSmall" x="670" y="120" />
<image xlink:href="/images/case-studies/rfd-small.png" x="673"
y="170" width="244" height="368" preserveAspectRatio="xMidYMin slice"
/>
</g>
</svg>
</div>
</div>