Care guide

위급도 안내

“When to see a doctor”. Only the urgent card has red text and icon; everything else is black.

RuleThe urgent color is used only on the “call 119” side. No colored header band — weight comes from a heavy border and a large title.

Also known as: CareGuideAlert

···

usage (Markdown)

<!-- sites/babyfood/posts/baby-food-allergy.md -->
## 이럴 땐 병원에 가요

- **바로 119**: 숨쉬기 힘들어함, 목이나 혀의 부기, 축 처짐, 의식이 흐려짐
- **빨리 진료**: 두드러기가 넓게 퍼지거나 구토가 계속돼요
- **상담 예약**: 같은 음식을 먹은 뒤 증상이 반복되거나, 피부가 계속 나빠져요

이유식 전체 흐름은 [이유식 단계별 가이드](/baby-food-stages-guide/)에서 볼 수 있어요.

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "CareGuide": "stack" }
}

props (ProseProps.careVariant)

export interface ProseProps {
  variant?: VariantOf<'Prose'>;
  careVariant?: VariantOf<'CareGuide'>;
  /** 정적 페이지(소개 등)처럼 표·병원 카드가 없는 글 */
  plain?: boolean;
}

stack puts the urgent card (“Call 119 or go to the ER”, red border) and a “See a doctor” card one above the other. split shows the two cards side by side on wide screens. plain has no boxes, only titles and lists with a thin line between the two groups, and only the urgent title is red.

Pick stack to make the warning stand out and plain to avoid breaking the flow of the article. The urgent color is applied only to the title and icon text (plus the border in stack and split), and the card background is never filled.

In dark mode the urgent card uses a softened red following the original button rule.

Use it when — Variants 3

stackStack When most readers are on phones — the urgent card first, with a heavy border.Used by 4: babyfood, babyplay, babysick, newborn
splitSplit When “call 119” and “see a doctor” should be compared — two cards side by side on wide screens.Used by 2: birthprep, toddlerfood
plainPlain When the page already has many boxes — headings and lists only; just the urgent heading is colored.Used by 5: babysleep, feeding, milestone, vaccination, 허브