Components

File Row

파일 항목 — 아이콘·이름·메타·진행바·상태를 한 줄에 담습니다.

PDF

계약서_2026.pdf

1.2 GB · 45 MB/s · 12초 남음

72%

코드 보기

<div class="f-row">
  <div class="f-ic">PDF</div>
  <div class="f-info">이름 · 메타 · 진행바</div>
  <span class="f-st">72%</span>
</div>

Variants

이름	설명	미리보기
전송 중	메타에 속도·남은시간, 진행바 검정	계약서.pdf 45 MB/s · 12초
완료	아이콘 그린 체크 반전, 진행바 그린	✓완료
실패	상태 텍스트 에러색	실패

Guidelines

✓ Do

전송 중엔 속도와 남은 시간을 메타에 표시
완료 시 아이콘을 그린 체크로 반전

✕ Don't

진행바를 4px보다 두껍게 만들지 않는다
파일명을 줄바꿈하지 않는다 (ellipsis)

Specification

속성	토큰/값	비고
`아이콘`	`32px / radius 7px / --muted 배경`
`진행바`	`4px / radius 999px`
`완료색`	`var(--ok)`