Portrait

Documentation

All components Marketing Brickwork 4.3.1

Try it

Founder profile

Open full-page preview

A named person with accessible portrait media.

Avery Morgan

Design systems consultant

Helps teams make reliable UI decisions.

Work together

Use for a founder, consultant or practitioner presence section.

Use it

Working invocation

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

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

context = {'name': 'Avery Morgan', 'role': 'Design systems consultant', 'body': 'Helps teams make reliable UI decisions.', 'image': '<svg viewBox="0 0 300 400" role="img" aria-label="Portrait of Avery Morgan"><rect width="300" height="400" fill="#c7d2fe"/><circle cx="150" cy="140" r="62" fill="#4f46e5"/><path d="M30 400c25-120 90-180 120-180s95 60 120 180" fill="#3730a3"/></svg>', 'primary_cta_label': 'Work together', 'primary_cta_href': '/contact/', 'align': 'end'}

Guide

Add it to your project

Use the public include path "brickwork_marketing/components/_portrait.html" from the installed django-brickwork package.
Include with person content and safe image markup.
Use dict CTA objects or flat template-friendly CTA fields; objects win.
Set align="end" to place the image at inline end on wide viewports.

View this component's source for the installed release

Options

Public API

Option	Type	Default	Required	Description
image	safe HTML	Not set	No	Pre-rendered safe portrait HTML placed in the component image slot. Constraint: Caller owns escaping and must give any image an accessible name.
name	string	Not set	No	Displayed person or plan name. Constraint: No additional template constraint beyond the documented type.
role	string	Not set	No	Short attribution or position line below the name. Constraint: No additional template constraint beyond the documented type.
body	string	Not set	No	Supporting plain-text paragraph. Constraint: No additional template constraint beyond the documented type.
primary_cta	object {label, url}	Not set	No	Preferred CTA object with exactly `label` and `url`; it overrides the flat primary fields. Constraint: Use either this object or its flat pair. If both are supplied, this object wins.
primary_cta_label	string	Not set	No	Visible label for the template-authorable primary CTA. Constraint: Supply `primary_cta_href` too; ignored when `primary_cta` is present.
primary_cta_href	string	Not set	No	Destination for the flat primary CTA; pair it with `primary_cta_label`. Constraint: Supply `primary_cta_label` too; ignored when `primary_cta` is present.
secondary_cta	object {label, url}	Not set	No	Secondary CTA object with exactly `label` and `url`; it overrides the flat secondary fields. Constraint: Use either this object or its flat pair. If both are supplied, this object wins.
secondary_cta_label	string	Not set	No	Visible label for the template-authorable secondary CTA. Constraint: Supply `secondary_cta_href` too; ignored when `secondary_cta` is present.
secondary_cta_href	string	Not set	No	Destination for the flat secondary CTA; pair it with `secondary_cta_label`. Constraint: Supply `secondary_cta_label` too; ignored when `secondary_cta` is present.
align	string	start	No	Image position at md and above. Allowed: start, end. Constraint: Use only this component’s documented choices.

Named blocks

Fill these only when you extend the component template. They are not values passed to an include or tag.

Block	What it replaces
name	Replaces the displayed name.
role	Replaces the role or attribution line.
body	Replaces the supporting body content.
actions	Replaces the CTA action region.
image	Replaces the conditional image slot with authored markup.

Behaviour

Accessibility and responsive behaviour

Accessibility: Name is h2. The supplied image must have meaningful alt text or appropriate decorative treatment.
Responsive: Stacks below md; two columns at md and above.
Without JavaScript: Static HTML; no JavaScript required.

Need help?

Troubleshooting

The portrait image is inaccessible.

Put descriptive alt text on the trusted image markup before passing `image`; the include cannot infer it.

Explore next