Case Headline

The first Image page-width off a case or article should always be 100% max. width

article>.notion-image.page-width:nth-child(5) {
    width: calc(100% - var(--padding-desktop) * 2) !important;
    max-width: calc(var(--m423-width) - var(--m423-radius) * 2);
    min-width: 800px;
    margin-top: 2rem;
}

IMAGES

Copy-Past Images

Rules:

• When past an image the image set to page-width
• When scale it sets to normal
• If scaled back to content size it sets to page-width

CSS-Rules

• 1st page-width image (nth-child) is set to —content-xxl (max. 1440)
• Any other page-width image should be —content-md (standard content)
• Scaled images normal – should be scaled related to notion - max.1200

Copy-Paste Image - Standard - NO SCALE

.notion-image.page-width {
    max-width: var(--content-md);
    width: calc(100% - 46px);
    margin: 2rem auto;
}

Copy-Paste Image - scaled smaller

div notion-image normal > img width=384

Copy-Paste Image - scaled bigger

div notion-image normal > img width=1056

.notion-image.normal {
    width: auto;
    max-width: calc(100% - var(--m423-radius) * 2);
    margin: auto;
}

Copy-Paste Images - scaled to normal

div notion-image page-width > img width=720

For dark / light mode response

Responsive images

Culum Images

Image pairings

Problem: The column lists don't have a specific width (no CSS max-width). I would like to have at least 2 variants.

BUTTONS

CTA’s

Example Application

Get connected.

Let's start a conversation.

Discover together where our paths might intersect.

Contact me

Reach me by mail

No detours. No noise.

Call me: +41 76 540 50 57

Download CV

Download PDF (512 KB)

My experience at a glance – a map of my journey through design and creation.

Primary - Background standard

Reach me by mail

Secondary - Backround gray

Download PDF (512 KB)

notion-link notion-button__content bg-gray-light

.notion-button__content.bg-gray-light {
    border-color: var(--color-bg-gray);
}

© 2025 Matze Lenz. All rights reserved. Imprint