Clinical trials container sizes

Sample page, not real content

Every block below is the Clinical trials grid from a BCH service page, linked to real trial cards. Within each group only one thing changes: the ContainerSize setting, the number of cards, or whether trials share the band with research initiatives. Widen and narrow the browser to compare; the cream background shows each band's edges.

Placeholder body copy so the page has text above the first grid. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

What goes in ContainerSize (two cards each)

1. ContainerSize not written at all

No ContainerSize key in the parameters. The band falls back to Full.

pencil

Clinical trials

2. ContainerSize left unset, bare flag

Written as `&ContainerSize&` with no equals sign, which reads as absent, so the band falls back to Full. This is how the merged Trials & research grids and Pediatric Lupus Program are written today.

pencil

Clinical trials

3. ContainerSize set to an empty value

Written as `&ContainerSize=&`. An empty value skips the fallback and the band gets no width class, yet it renders the same as Full. This is how the other 11 standalone Clinical trials grids, including Pediatric Endocrinology and PIRD, are written today.

pencil

Clinical trials

4. ContainerSize = Small

The narrowest option in the droplist.

pencil

Clinical trials

5. ContainerSize = Medium

What Pediatric Infectious Diseases carries. The cards sit inside a second Medium container, so they are indented twice.

pencil

Clinical trials

6. ContainerSize = Large

Wider than Medium, narrow side padding.

pencil

Clinical trials

7. ContainerSize = Hero

Full width with 24px of side padding.

pencil

Clinical trials

8. ContainerSize = Full

Full width, no side padding. Same as leaving it unset (the first two specimens).

pencil

Clinical trials

9. ContainerSize = Search

Not in the editor droplist. The frontend maps it to a misspelled class, `conntainer-w-search`, which renders the same as Medium.

10. ContainerSize = None

Not in the editor droplist. Maps to no class at all, like the empty value.

pencil

Clinical trials

How many cards (the grid is two columns at desktop)

11. One card, empty ContainerSize

PIRD's single trial, written the way PIRD is today. One card fills the left column and leaves the right one empty.

pencil

Clinical trials

12. One card, ContainerSize unset (Full)

The same single card with the band at Full.

pencil

Clinical trials

13. Three cards, empty ContainerSize

An odd number leaves the last row half full.

pencil

Clinical trials

14. Three cards, ContainerSize unset (Full)

The same three cards with the band at Full.

pencil

Clinical trials

15. Five cards, empty ContainerSize

Pediatric Endocrinology's full set, written the way it is today.

pencil

Clinical trials

16. Five cards, ContainerSize unset (Full)

The same five cards with the band at Full.

pencil

Clinical trials

Trials and research in one grid

17. Research initiatives + Clinical trials, ContainerSize unset (Full)

The shape used when a page also has research cards: one band with two sections. Copied from Pediatric Aerodigestive Care, written the way it is today.

pencil

Trials & research

18. Research initiatives + Clinical trials, empty ContainerSize

The same two sections with the empty value the standalone grids carry.

pencil

Trials & research

More sample text below the grids

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