S shadcn · 14

위급도 안내

Care guide

「이럴 땐 병원에 가요」. 위급 카드만 빨간 글자와 아이콘, 나머지는 검은 글자예요.

쓰는 규칙위급 색은 「바로 119」 쪽에만 쓴다. 카드 머리에 색 띠를 두르지 않고, 굵은 테두리와 큰 제목으로 무게를 준다.

다른 이름: 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 은 위급 카드(「바로 119·응급실」, 빨간 테두리)와 「진료를 받아 보세요」 카드가 위아래로 쌓여요. split 은 넓은 화면에서 두 카드가 나란히 서요. plain 은 상자 없이 제목과 목록만 있고 두 칸 사이에 가는 선이 있으며 위급 제목만 빨간색이에요.

경고를 눈에 띄게 하려면 stack, 위아래 흐름을 방해하지 않으려면 plain 이에요. 위급 색은 제목·아이콘 글자(stack·split 은 테두리까지)에만 쓰고, 카드 바탕은 칠하지 않아요.

어두운 모드에서는 위급 카드를 원본 button 규칙대로 옅은 빨강으로 써요.

이럴 때 — 변형 3

  1. stack위아래 카드 폰으로 읽는 사람이 대부분일 때 — 위급 카드가 먼저, 굵은 테두리.쓰는 사이트 4곳: babyfood, babyplay, babysick, newborn
  2. split나란히 「바로 119」와 「진료」를 견주어 보게 하고 싶을 때 — 넓은 화면에서 두 카드 나란히.쓰는 사이트 2곳: birthprep, toddlerfood
  3. plain상자 없이 본문에 이미 상자가 많을 때 — 제목과 목록만, 위급 제목만 위급 색.쓰는 사이트 5곳: babysleep, feeding, milestone, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.