Simple CTA container sizes

Sample page, not real content

Every card below is the same Simple CTA component with the same copy, the same Bay Mist background and the same button. The only thing that changes from one to the next is the ContainerSize rendering parameter, so the difference you see is the difference that parameter makes. Widen and narrow the browser to compare; the tinted background makes each card's left and right edges easy to read.

Placeholder body copy so the sheet has text above the specimens. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

More placeholder body copy. The quick brown fox jumps over the lazy dog, and the lazy dog does not mind. The quick brown fox jumps over the lazy dog.

The five values in the droplist

1. ContainerSize = Small

Narrowest option. Caps at 917px and drops its side padding from 1024px up, so the card is 917px wide on any desktop.

2. ContainerSize = Medium

The default for this component. Caps at 1440px with 118px of padding each side from 1024px up, so the card is 1204px wide at 1440px and above.

3. ContainerSize = Large

Same 1440px cap as Medium but only 24px of side padding, dropping to none at 1488px, so the card runs to the full 1440px on a wide screen.

4. ContainerSize = Hero

Caps at 1920px with 24px of side padding from 1024px up. Meant for full-bleed bands; on a 1440px screen it is wider than Large by the padding alone.

5. ContainerSize = Full

Caps at 1920px with no side padding at all. The card touches the viewport edges until the screen is wider than 1920px.

Two more the code understands but the droplist does not offer

6. ContainerSize = Search

Between Large and Medium: 1440px cap, padding steps 24px, then 48px at 1200px, then 118px at 1440px. Used by search pages via code, so it is not in the editor droplist.

7. ContainerSize = None

Maps to an empty class. The card gets no width class at all and falls back to the bare Tailwind container, same as specimen 9 below.

Two ways of leaving it unset, which do not match

8. ContainerSize left unset (bare flag)

Written as `&ContainerSize&` in the layout XML with no equals sign. That parses as absent, the component's Medium fallback engages, and this card matches specimen 2.

9. ContainerSize set to an empty value

Written as `&ContainerSize=&` with an equals sign. That parses as an empty string, which skips the fallback and emits no width class, so this card is wider and sits flush left instead of centred. This is the difference between the two CTAs on the pediatric kidney transplant page.

More sample text below the specimens

Placeholder body copy after the cards, so the last specimen is not the last thing on the page. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The two unset spellings above are worth remembering. Editing a component in Pages rewrites its parameter string and can turn a bare flag into an empty value, which silently changes the component's width without anyone touching the size setting.

Placeholder body copy. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.