Design reference

Provenance

• Source: Figma Make file Wireframe Components Design.
• File key: jWi0xhPKpEgJEpjZlpC4z1.
• Captured version: Version 5.
• Owner shown in Figma: Delycia.
• Access during capture: view-only.
• Captured: 16 July 2026, Africa/Johannesburg.

The screenshots below are curated evidence from the approved internal source bundle. The raw ZIP, proprietary .make archive, generated preview JavaScript, and generated stylesheet are deliberately not served.

Component set

1. Header Banner with title, background image, optional description, and optional CTA.
2. One-Column Layout with Text or Image variants and an optional CTA.
3. Two-Column Layout with Text/Text, Image/Image, and Text/Image variants.
4. Accordion with expandable rows.
5. Full-width Banner Text with optional CTA.
6. Contact-form reference.
7. Four-Column image-card layout with optional text.

Curated captures

Desktop overview of the component library.

Version 5 mobile preview at 393 × 852.

Header Banner and early layout components.

Two-Column Text/Image variant.

Accordion expanded state and Banner Text.

Static contact-form reference and Four-Column start.

Four-Column layout with optional supporting text.

Recorded responsive behaviour

• The sidebar becomes a mobile top bar and navigation drawer.
• Component padding tightens and annotation labels disappear on small screens.
• Two-column variants stack from one column to two at the reference sm breakpoint.
• Text/Image places the image before the text and CTA on mobile.
• Form field pairs stack vertically on mobile.
• The captured Four-Column layout uses a 2×2 mobile grid, which conflicts with the PDF's single-column requirement.

Limitations

The reference demonstrates layout intent, not production code. It does not settle semantic HTML, Craft field configuration, brand tokens, final breakpoints, content constraints, or accessibility acceptance.