[ None Labs ] Convenience in Everyday life

UX 및 동적 인터랙션(JS 기능)을 배제하고 Figma 규격을 1:1로 추출한 순수 UI 블록 컴포넌트 킷입니다.
추후 Svelte, React 등 프론트엔드 도구에서 비즈니스 로직과 이벤트 핸들러만 바로 결합하여 사용할 수 있습니다.

1. 상단 브랜드 헤더 (Top Brand Bar - Desktop)

w-full max-w-[680px] h-[24px]

[ None Labs ]

Convenience in Everyday life

2. 상단 브랜드 헤더 (Top Brand Bar - Mobile 300px)

w-[260px] h-[8px]

[ None Labs ]

Convenience in Everyday life

3. 타이틀 & 인사말 블록 (Greeting Title)

text-[32px] leading-[38px] Pretendard

안녕하세요, 회원 님

요청하신 인증번호가 도착하였습니다

4. 인증코드 디스플레이 카드 (Auth Key Box)

Desktop (395 × 80 px) & Mobile (260 × 60 px)

28169

5. 공지사항 콘텐츠 카드 (Notification Card)

w-full max-w-[676px] rounded-[10px] border border-[#686868]

[공지] 림미르르의 훈화말씀

두마에 아딩엉나 지미삭히잉의, 나나저푼푀느이는 흉므에 폄주가 살단 믠녁이님이 의있 이초봅자찬더를. 산울도 안그므시젠뎐도 맘레는 긍딚아 깁트 야마터다 아자엠시나 뎔세를. 암끼과말항에 다입제잦드는 의놔를, 콰수스 샌이다처럼 겨도아다 깅긴끼 셔성온습니다 하더번너 음사즈와 오고수롬을.

6. 뉴스레터 피드/질문 카드 (Newsletter Feed Card)

w-full max-w-[680px] h-[170px] border border-[#888888]

림미르 폼 미쳤다

이거 보여줄려고 어그로 끌었다.

99+

7. 하단 브랜드 푸터 (Lower Brand Footer)

bg-[#DEDEDE] pl-[40px] pr-[40px] py-[67px]