bar is one row: name on the left, menu on the right, each menu cell as tall as the strip. On a phone, a menu button on the left opens a side menu. stacked adds a grey row under the dark strip for topic tabs; the strip itself carries the name and a one-line intro, and on a phone the tabs slide sideways without folding. compact keeps only an "All menu" button on the right; it opens a dark panel listing each topic with its description and post count.
With four or five short topics, bar is the simplest. With more topics, or when you want descriptions shown, stacked or compact fits better. In every variant this is the darkest surface on a light page, so it can feel heavy on a light, gentle parenting site. In dark mode it is the same colour as the page, set apart only by a thin line below.
The name slot follows Carbon’s "Header name" position; no IBM wordmark or logo is used.
Use it when — Variants 3
- barSingle bar When 3–5 topics fit on one line next to the name. On phones the menu folds open.Used by 3: babyplay, babysick, feeding
- stackedTwo rows When topic tabs should always be visible — on phones they scroll sideways instead of folding.Used by 4: babyfood, toddlerfood, vaccination, 허브
- compactFull menu When there are many topics, or each topic deserves a one-line description and post count.Used by 4: babysleep, birthprep, milestone, newborn