Skip to main content
brickwork
GitHub Log in Get started
Display
Theme
Density
Direction
Brand

Documentation

Product shot

An elevated frame for consumer-owned product stills or clips, with optional light window chrome.

All components Marketing Brickwork 4.3.1

Try it

Windowed product image

Open full-page preview

A named product interface within light window chrome.

<svg viewBox="0 0 640 400" role="img" aria-label="Project dashboard interface"><rect width="640" height="400" fill="#eef2ff"/><rect x="32" y="32" width="576" height="336" rx="16" fill="#ffffff"/><rect x="64" y="72" width="156" height="18" rx="6" fill="#4f46e5"/><rect x="64" y="124" width="512" height="72" rx="10" fill="#dbeafe"/><rect x="64" y="220" width="240" height="116" rx="10" fill="#ede9fe"/><rect x="328" y="220" width="248" height="116" rx="10" fill="#dcfce7"/></svg>
Use inside hero or feature media slots to present a product image. It is not a live specimen preview frame.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

templates/your_app/component.html

Django template

{% include "brickwork_marketing/components/_product_shot.html" %}

your_app/views.py

Python

context = {'content': '<svg viewBox="0 0 640 400" role="img" aria-label="Project dashboard interface"><rect width="640" height="400" fill="#eef2ff"/><rect x="32" y="32" width="576" height="336" rx="16" fill="#ffffff"/><rect x="64" y="72" width="156" height="18" rx="6" fill="#4f46e5"/><rect x="64" y="124" width="512" height="72" rx="10" fill="#dbeafe"/><rect x="64" y="220" width="240" height="116" rx="10" fill="#ede9fe"/><rect x="328" y="220" width="248" height="116" rx="10" fill="#dcfce7"/></svg>', 'window': 'light'}

Guide

Add it to your project

  1. Use the public include path "brickwork_marketing/components/_product_shot.html" from the installed django-brickwork package.
  2. Prepare useful image, SVG or video markup and mark it safe only after trust/sanitisation.
  3. Include with content.
  4. Set window="light" only when decorative browser-window dots help the presentation.

View this component's source for the installed release

Options

Public API

Option Type Default Required Description
content safe HTML Not set No Framed media; empty emits nothing. Constraint: Caller owns escaping. Do not pass untrusted HTML.
window string none No Frame chrome: `none` keeps an elevated media frame; `light` adds decorative traffic-light dots. Allowed: none, light. Constraint: Allowed values are `none` and `light`; `light` is decorative chrome only.

Behaviour

Accessibility and responsive behaviour

Accessibility
Figure has no caption. Window dots are aria-hidden; supplied media needs its own accessible name if meaningful.
Responsive
Fluid with max inline size of 100%.
Without JavaScript
Static presentation; no JavaScript required.

Need help?

Troubleshooting

The frame is empty.

Supply trusted `content`; the component returns no figure for empty content to avoid a broken media box.

Explore next

Used in examples

Documentation