C Carbon · 14

위급도 안내

Care guide

「바로 119」 카드만 빨간 굵은 테두리와 빨간 제목이고, 나머지 안내는 회색 상자예요. 위아래, 나란히, 상자 없음 세 가지로 놓을 수 있어요.

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

다른 이름: CareGuide
···
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은 위급 카드가 위에, 「진료를 받아 보세요」 회색 상자가 아래에 오고 두 카드 모두 넓게 펼쳐져요. split은 넓은 화면에서 두 카드를 나란히 놓아 높이가 달라 보여요. plain은 상자를 없애고 제목과 목록만 두며 위급 제목만 빨간색이에요. 제목 아래와 구분 사이에 가는 선이 있어요.

위급 신호를 가장 강하게 보이려면 테두리가 있는 stack이나 split이 좋아요. 본문 흐름을 끊지 않게 하려면 plain이 조용해요. 이 화면에서 빨간색은 위급 카드에만 보여요.

이럴 때 — 변형 3

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

항목 추가 요청

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