# CTA two doors

> A closing band split into two tall photographs side by side, edge to edge, each a door for a different audience with its own label, heading, line and button. One is veiled in your theme's contrast colour with your base as the type, the other in your base with your contrast as the type, so the pair reads as two doors in any theme, even one with no colour at all. Includes replaceable example photographs and a short hand-off row on your theme's paper below. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cta-two-doors.html
Section: Call to action
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, cover, group, heading, paragraph
Keywords: cta, cover, split, audiences, photo, closing

## Variations (2)

### Two doors (the default)

Identical markup in every theme.

Two equal doors, ink on the left and paper on the right, each an 80% veil over its own photograph. Side by side from tablet width up, stacked on a phone.

### Main door

Identical markup in every theme.

The same two doors at two to one: a wide ink door with the larger heading for the audience you want most, and a narrow paper side door for the other. Side by side from tablet width up, stacked on a phone.


---

## The signature moment: two doors

The veils are the composition. The left door is veiled in your `contrast` at
80% with `base` type, the right in your `base` at 80% with `contrast` type, and
the two meet at a hard seam with no gap. Strip every colour from the theme and
it is still one dark panel beside one light one, so the page ends on a choice
rather than on a single ask. The photographs are texture behind each veil; the
split is what a visitor sees.

## Why type on a photograph is permitted here

A cover's veil is a chain at a known opacity, so the lightest and darkest
ground each door's type can land on is the veil over a white and over a black
photograph. The contrast half of `check-responsive` composites both and the
worse has to pass. Lower either veil below 80 and that stops being true.

## The buttons

The paper door's button states no colour, so your theme's `elements.button`
paints it: a filled button reads on a light veil. The ink door's button is an
outline, transparent with a `base` label and a `currentColor` border, because a
theme-filled button in `contrast` would sink into a `contrast` veil and leave a
label floating with no edge.

## What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale. Decides: the veil
opacity, the door height, the copy's position, the 26rem measure of the line
under each heading, and the grid's 22rem minimum column, so the doors hold side
by side at tablet width and stack on a phone.

- **Height**: `minHeight` 52vw, so a door is taller than it is wide from tablet
  up (998px tall by 960px wide at 1920). Never `vh`, which sizes to the preview
  frame. On a phone the stacked doors keep their height through a
  `clamp(10rem, 16vw, 14rem)` top padding.
- **Position**: `contentPosition` bottom left, where a door's handle is. The
  cover's layout is `default`, and the measure group states zero side padding:
  a constrained layout in a theme with root-padding-aware alignments (Twenty
  Twenty-Five) adds `has-global-padding`, which would add the theme's gutter a
  second time inside the door.
- **Headings are display type, off the ladder**: a bare
  `clamp(2.75rem, 5.2vw, 5.5rem)`, because at this size the heading IS the door
  and has to hold a 960px panel. Large display, so 3:1 is its floor; it
  measures far above that.

## What a buyer changes first

The two photographs: select a cover and choose Replace. Then the labels and
headings, which name the two audiences. Keep each heading to about four words.

## Variations

- **Main door**: the same pair at two to one, a three-track grid
  (`minimumColumnWidth` 16rem) with the ink door spanning two, so both doors
  always end at one height. The wide door takes a `clamp(3rem, 6.5vw, 7rem)`
  heading for the audience you want most, the narrow paper side door
  `clamp(1.75rem, 3vw, 3.25rem)` and a short "Apply". WordPress drops the span
  below 33.5rem, so the doors stack on a phone and hold two to one at tablet.

## The hand-off row

Below the doors, a short row on your theme's paper with one centred line, so
the section ends and the page does not. It is the first thing a buyer rewrites
or deletes.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The
public image URLs keep the examples visible after pasting. Select a cover and
choose **Replace** to use your own Media Library files. See
[image credits](/image-credits/) for the sources and licenses. Pasting an image
URL does not import a Media Library attachment.